Skrypt:

$(document).ready(function () {
    $("#finance").hide();
    $("#HR").hide();

    var slz = jQuery('#specialization');
    var select = this.value;
    slz.change(function () {
        if ($(this).val() == '2') {
            $('#finance').show();
            $('#HR').hide();
        }
        if ($(this).val() == '3') {
            $('#HR').show();
            $('#finance').hide();
        }
        if ($(this).val() == '1') {
            $('#finance').hide();
            $('#HR').hide();
        }
    });
});

HTML:

<select name="specialization" id="specialization">
 <option value="1" id="1">select specialization</option>
 <option value="2" id="2">Finance</option>
 <option value="3" id="3">Human Resource</option>
 <option value="4" id="4">Information Technology</option>
 <option value="5" id="5">Marketing</option>
 <option value="6" id="6">Material Management</option>
 <option value="7" id="7">Operations</option>
 <option value="8" id="8">Supply Chain Management</option>
</select>
<div id="specialization_subjects">
    Specialization Subjects
</div>
<ul id="finance">
 <li>Financial Institution & Services</li>
 <li>International Financial Management</li>
 <li>Working Capital Management</li>
 <li>Project Work</li>
</ul>
<ul id="HR">
 <li>Financial Institution & Services HR</li>
 <li>International Financial Management</li>
 <li>Working Capital Management</li>
 <li>Project Work</li>
</ul>

Cześć Każdy JavaScript i kod HTML do pokazania i ukrywania UL zgodnie z wybraną wartością rozwijaną .. Ten kod działa dla mnie w porządku .. ale chciałem zminimalizować plik JavaScript ..Ponieważ mam dużo UL i Dużo rozwijanego ..

Chciałem usunąć, jeśli jest warunkiem i chciałem użyć do pętli do pracy, przechowując wartości w tablicach itp ..

Dzięki z góry proszę o pomoc

0
Mohammed Sufian 22 listopad 2013, 19:32

2 odpowiedzi

Najlepsza odpowiedź

Zamierzam założyć, że nie proszę o minify , ale do minimalizuj kod i uczynić go bardziej wydajnym. A ponieważ mówisz, że masz wiele danych, a Twoja opcja pokazuje 8 wyborów, gdy Twój kod zajmuje się tylko 2, zamierzam pokazywać sposób, aby łatwo obsługiwać wybór opcji.

(Zakłada się, że możesz zmienić HTML. Jeśli nie możesz, proszę, sprawdź to jasne.)

Najpierw dodaj wspólną klasę do wszystkich uls, z którymi chcesz się zajmować, i dodaj atrybut danych pasujący do wartości opcji

<ul id="finance" class="dropDownOption" data-optionValue="2">
 <li>Financial Institution & Services</li>
 <li>International Financial Management</li>
 <li>Working Capital Management</li>
 <li>Project Work</li>
</ul>
<ul id="HR" class="dropDownOption" data-optionValue="3">
 <li>Financial Institution & Services HR</li>
 <li>International Financial Management</li>
 <li>Working Capital Management</li>
 <li>Project Work</li>
</ul>

Następnie funkcja slz.change staje się dużo łatwiejsze i bardziej solidne:

slz.change(function () 
{
    $(".dropDownOption").hide();
    $("ul[data-optionValue='" + this.value + "']").show();
}

Bez modyfikowania znacznika możesz robić kilka rzeczy, ale są zagrożone. z pokazanym znacznikiem , jest bezpieczny, aby po prostu użyć $("ul").hide(), choć jeśli nie pokazałeś nam wszystkich, to może być niebezpieczne. Za obsługę wartości do identyfikatora, potrzebowałbyś funkcji konwersji:

function convertValueToId(value) {
    switch (value) {
        case 1: return; // empty return, since this one is the "unselected" case
        case 2: return "finance";
        case 3: return "HR";
        // etc
    }
}
slz.change(function() {
    $("ul").hide();
    var id = convertValueToId(this.value);
    if (id) {
        $("#" + id).show();
    }
}
0
Scott Mermelstein 22 listopad 2013, 15:51

Możesz użyć switch case zamiast if else

0
Super Hornet 22 listopad 2013, 15:45