javascript - 使用淡入淡出切换隐藏除选择选项之外的所有其他 div 类

Question

我需要使用<select>显示语言列表帮助 pdf 指南。当有人选择语言选项时，我想淡出切换所有其他 pdf 链接。这是我到目前为止整理的内容；但它不起作用，我需要使用类而不是 id。

 <select id="load">
   <option>english</option>
   <option>spanish</option>
   <option>italian</option>
 </select>

<h1> help text one </h1>
 <ul class="content-list">
   <li> english</li>
   <li> spanish</li>
   </ul>

<h1> help text two </h1>
 <ul class="content-list">
   <li> english</li>
   <li> italian</li>
 </ul>


 <h1> help text three </h1>
 <ul class="content-list">
   <li> english</li>
 </ul>

js

  $(document).ready(function(){
    $("#load").change(function(event) {
      var id= "#"+this.value;
        $(".content-lists").filter(":not("+id+")").hide();
        $(id).fadeToggle("slow", "linear");//This will toggle div based on the selected option
       });
   });

Answer 1

好的，您遇到了很多问题:

• 您需要使用class而不是id ，因为您将有多个“英语”、“西类牙语”等项目。
• 您需要使用fadeIn而不是fadeToggle ，因为你已经隐藏了其他的
• 您没有输入 class (或 id )在您的列表项中
• 您的类(class)是“content-list”而不是“content-lists”
• 您需要选择个人 li不是content-list本身
• 您没有在 :not() 内的选择器周围添加引号

jsFiddle

HTML:

<select id="load">
   <option>english</option>
   <option>spanish</option>
   <option>italian</option>
</select>

<h1> help text one </h1>
<ul class="content-list">
   <li class="english"> english</li>
   <li class="spanish"> spanish</li>
</ul>

<h1> help text two </h1>
<ul class="content-list">
   <li class="english"> english</li>
   <li class="italian"> italian</li>
</ul>

<h1> help text three </h1>
<ul class="content-list">
   <li class="english"> english</li>
</ul>

JS:

$(document).ready(function(){
    $("#load").change(function(event) {
        var class1= "."+this.value;
        $(".content-list li").filter(":not('"+class1+"')").hide();
        $(class1).fadeIn("slow", "linear");
    });
});