0

我需要使用 a<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
       });
   });
4

2 回答 2

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

演示

  1. 你的班级不匹配.content-listsv/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();

演示

于 2013-06-07T16:45:27.900 回答
1

好吧，你有很多问题：

  • 您将要使用class而不是id，因为您将拥有多个“英语”、“西班牙语”等项目。
  • 你会想要使用fadeIn而不是fadeToggle，因为你已经隐藏了其他人
  • 您没有在列表项上放一个class（或一个）id
  • 您的课程是“内容列表”而不是“内容列表”
  • 您将要选择个人lis 而不是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");
    });
});
于 2013-06-07T16:46:59.047 回答