تبديل رؤية div من خلال قائمة مربعات الاختيار

Question

لدي تطبيق ويب (ASP.NET2.0 C#).بداخله، لدي div يحتوي على قائمة مربعات اختيار وزر.

أريد تبديل عرض div، لذلك حصلت على بعض أكواد جافا سكريبت عبر الإنترنت لمساعدتي.

ها هو الكود:

<script language="javascript">
var state = 'hidden';

function showhide(layer_ref) {

    if (state == 'visible') 
    {
        state = 'hidden';
    }
    else 
    {
        state = 'visible';
    }
    if (document.all) 
    { //IS IE 4 or 5 (or 6 beta)
        eval( "document.all." + layer_ref + ".style.visibility = state");
    }
    if (document.layers) 
    { //IS NETSCAPE 4 or below
        document.layers[layer_ref].visibility = state;
    }
    if (document.getElementById && !document.all) 
    {
        maxwell_smart = document.getElementById(layer_ref);
        maxwell_smart.style.visibility = state;
    }
}
</script>

أنا أسمي الوظيفة بهذه الطريقة:

<a href="javascript://" onclick="showhide('AlertDiv');">Choose Columns</a>

عندما أستخدم هذه الوظيفة، تظهر لي القسم مع الزر، لكنها لا تظهر لي قائمة الاختيار.... هل لديك أي أفكار حول ما يحدث؟

شكرًا لك.

Answer 1

هل حاولت استخدام الشاشة بدلا من الرؤية ل؟

وعلى سبيل المثال، بدلا من:

document.getElementById(layer_ref).style.visiblity = "hidden";
document.getElementById(layer_ref).style.visiblity = "visible";

استخدم:

document.getElementById(layer_ref).style.display = "none";
document.getElementById(layer_ref).style.display = "block";

وسيكون لديك ليحل محل كل ما تبذلونه من إشارات إلى الرؤية لمع عرض ليس فقط النسخة getElementById. أنت أيضا قد ترغب في النظر في استخدام مسج التي سوف تتعامل مع السيناريو الخاص بك مع بضعة أسطر من التعليمات البرمجية، بالإضافة إلى لا حاجة لسمة عند _ النقر إلى سحابة لك أتش تي أم أل.

<script type="text/javascript" src="jquery-1.3.2.js">
</script>
<script type="text/javascript">
  $(document).ready(function() {
    $('.toggleLink').click(function(e) {
       e.preventDefault();
       $('#AlertDiv').toggle();
    });
  });
</script>
<a href="#" class="toggleLink">Choose Columns</a>

Answer 2

بعض الاقتراحات:

1. يجب عليك حقًا التفكير في استخدام مكتبة جافا سكريبت مثل أسب.نت أجاكس أو مسج.سيساعد هذا في إخراج الكود الخاص بالمتصفح من الطريق.
2. قم بإسناد الرؤية إلى حالة مربع الاختيار، بدلاً من مجرد تبديلها.
3. ربما يكون "العرض" أسلوبًا أفضل في هذه الحالة بدلاً من "الرؤية".إذا كنت تستخدم "الرؤية" فستحصل على مساحة فارغة حيث يجب أن تكون "الطبقة" عندما تكون غير مرئية.
4. بدلاً من "مرجع الطبقة" ربما تريد تمرير معرف علامة div ومعرف مربع الاختيار.

مثال في asp.net اياكس:

هنا سيكون مربع الاختيار الخاص بك:

<input type="checkbox" id="mycheck" onclick='showhide("mycheck","mylayer")' /> 

هذه هي المنطقة التي تريد إظهارها/إخفاءها:

<div id='mylayer'>content</div>

هنا هي وظيفتك:

<script language="javascript">
function showhide(checkboxid, layerid)
{

    if($get(checkboxid).checked==true)
    {
         $get(layerid).display = "none";
    }
    else
    {
         $get(layerid).style.display = "";
    }
}
</script>