Próbuję pokazać i ukryć listę, ale z jakiegoś powodu nie działa? Patrzyłem na linię na rozwiązanie, ale znalazłem wiele przykładów do pokazywania i ukrywania LI, ale żaden, który pomaga mi rozwiązać ten problem. Chcę nacisnąć przycisk i wyświetlić i ukryć listę. Dzięki za wkład.

            <script type="text/javascript">  
             if (typeof language === "undefined") {
                var language="EN"; 
             }          

             if (language == "EN"){
                    document.write("<ul data-role='none' id='list-navigation'>");
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-a' class='scrollToSelected alphabetA letters_EN'><strong>A</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-b' class='scrollToSelected alphabetB letters_EN'><strong>B</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-c' class='scrollToSelected alphabetC letters_EN'><strong>C</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-d' class='scrollToSelected alphabetD letters_EN'><strong>D</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-e' class='scrollToSelected alphabetE letters_EN'><strong>E</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-f' class='scrollToSelected alphabetF letters_EN'><strong>F</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-g' class='scrollToSelected alphabetG letters_EN'><strong>G</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-h' class='scrollToSelected alphabetH letters_EN'><strong>H</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-i' class='scrollToSelected alphabetI letters_EN'><strong>I</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-j' class='scrollToSelected alphabetJ letters_EN'><strong>J</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-k' class='scrollToSelected alphabetK letters_EN'><strong>K</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-l' class='scrollToSelected alphabetL letters_EN'><strong>L</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-m' class='scrollToSelected alphabetM letters_EN'><strong>M</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-n' class='scrollToSelected alphabetN letters_EN'><strong>N</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-o' class='scrollToSelected alphabetO letters_EN'><strong>O</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-p' class='scrollToSelected alphabetP letters_EN'><strong>P</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-q' class='scrollToSelected alphabetQ letters_EN'><strong>Q</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-r' class='scrollToSelected alphabetR letters_EN'><strong>R</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-s' class='scrollToSelected alphabetS letters_EN'><strong>S</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-t' class='scrollToSelected alphabetT letters_EN'><strong>T</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-u' class='scrollToSelected alphabetU letters_EN'><strong>U</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-v' class='scrollToSelected alphabetV letters_EN'><strong>V</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-w' class='scrollToSelected alphabetW letters_EN'><strong>W</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-x' class='scrollToSelected alphabetX letters_EN'><strong>X</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-y' class='scrollToSelected alphabetY letters_EN'><strong>Y</strong></li>"); 
                    document.write("<li  onclick='return true;' data-ajax='false' id='list-z' class='scrollToSelected alphabetZ letters_EN'><strong>Z</strong></li>"); 

                    document.write("</ul>");
             }


$( document ).ready(function() {


    $( ".showLetters" ).click(function() {


        ( ".letters_EN" ).('li').show();
    });     

        $( ".hideLetters" ).click( function() {


        $( ".letters_EN" ).('li').hide();

        }); 


});

</script> 
     <br /><br /><br />


 <button class='showLetters'>Show Letter</button>
     <button class='hideLetters'>Hide Letter</button>
0
user3022637 22 listopad 2013, 21:11

3 odpowiedzi

Najlepsza odpowiedź

Selektor do pokazania i ukrywania się w funkcji jQuery jest nieprawidłowy.

Soln:

$(document).ready(function() {
    $(".showLetters").click(function() {
      $("#list-navigation li").show();
    });     
    $(".hideLetters").click(function() {
      $("#list-navigation li").hide();
    }); 
});
1
Satpal 22 listopad 2013, 17:38

Posługiwać się

 $( "li.letters_EN" )

Zamiast

 $( ".letters_EN" ).('li')

PRÓBNY

2
Satpal 22 listopad 2013, 17:15

Zrób to tak:

$(function(){
    $( ".showLetters" ).click(function() {
        $('#list-navigation').show();
    });
    $( ".hideLetters" ).click( function() {
        $('#list-navigation').hide();
    });
});

Spowoduje to ukrywanie całej listy zamiast każdego elementu listy.

1
Pablo.mtz 22 listopad 2013, 17:19