使用fade toggle隐藏除select选项中的div类以外的所有其他div类

Question

我需要使用<select>来显示语言帮助指南列表。当有人选择语言选项时，我想淡化切换所有其他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)放在你的列表项目
• 你的类是"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");
    });
});

Answer 2

当前代码中存在一些问题。或许你可以这样试试:-

HTML

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

JS

$("#load").change(function (event) {
    var id = this.value;
    $(".content-list li").filter(function () {
        if ($(this).text().trim() === id) $(this).fadeIn("slow");
        else return $(this)
    }).fadeOut("slow");
}).change();

演示

1. 你的类不匹配.content-lists v/s .content-list
2. 查找不存在的id。因此，根据您当前的标记
查找li文本
3. 为选项提供值，否则可能无法在IE中工作。

如果你可以更容易地为你的li事件使用类名

Html

<select id="load">
    <option value="english">english</option>
    <option value="spanish">spanish</option>
    <option value="italian">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

$("#load").change(function (event) {
        var cls = '.' + this.value;
        $(".content-list li")
            .filter(':not(' + cls + ' )') //Filter out all lis but the selected one
            .fadeOut("slow", function ()  { //Fade them out
                   $(cls).fadeIn("slow"); // in the fade complete call back fadeIn the selected one
        });
    }).change();

演示