使用淡入淡出切换来隐藏所有其他div类，但使用select选项中的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

您当前的代码中存在一些问题。也许你可以尝试这种方式： -

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();

Demo

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();

Demo

Answer 2

好的，你有很多问题：

• 您需要使用class代替id，因为您将拥有多个“英语”，“西班牙语”等项目。
• 您需要使用fadeIn而不是fadeToggle，因为您已经隐藏了其他人
• 您没有在列表项上添加class（或id）
• 您的课程是“内容列表”而非“内容列表”
• 您需要选择个人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");
    });
});