javascript - 使用 if 语句和 document.write 隐藏/显示 li 列表

Question

我正在尝试显示和隐藏列表，但由于某种原因它不起作用？我一直在网上寻找解决方案，但发现了很多显示和隐藏 li 的示例，但没有一个 帮我解决这个问题。我想按一个按钮并显示和隐藏列表。感谢您的投入。

            <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>

Answer 1

使用

 $( "li.letters_EN" )

而不是

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

DEMO