通过下拉菜单“ fadeToggle”多个div标签

Question

我需要能够通过下拉菜单在同一页面上隐藏/显示多个div标签，但是我希望它们使用jQuery'fadeToggle'。 我可以使用以下代码轻松地执行此操作而无需 'fadeToggle'：

function generateTask() {
     document.getElementById('football').style.display = 'none'; 
     document.getElementById('football2').style.display = 'none';
}

的HTML：

     <select name="something" id="something">
       <option value="1" onclick="generateTask();">Football</option>
       <option value="2" onclick="generateTask();">Cricket</option>
       <option value="3" onclick="generateTask();">Baseball</option>
     </select>


    <div id="football">balls</div>
    <div id="football2">shorts</div>

但是这种解决方案并不那么优雅。 任何帮助，将不胜感激。

主要的复杂之处在于，板球可能同时需要div标签“ football”和“ football2”，而说棒球则只需要“ football2”。

Answer 1

你可以试试这个

function generateTask(){ $('#football, #football2').toggle();}

或yan可以在应该受下拉菜单影响的每个元素上添加类：例如：

<div id="football" class="football">balls</div>
<div id="football2" class="football cricket">shorts</div>
<div id="cricket" class="cricket">stick</div>

并且比对与您的下拉操作相关联的每个元素。

Answer 2

如果您可以将选项的值保留为div的ID，那么它将更加简单。 像这样

标记

<select name="something" id="something"> 
     <option value="football">Football</option> 
     <option value="cricket">Cricket</option> 
     <option value="baseball">Baseball</option> 
</select>
<div id="football" class="content">Football content</div>
<div id="cricket" class="content">Cricket content</div>
<div id="baseball" class="content">Baseball content</div>

JS

$("#something").change(function(){
    var id = "#"+this.value;
    //This will hide all the divs with class content but not the selected option
    $(".content").filter(":not("+id+")").hide();
    $(id).fadeToggle();//This will toggle div based on the selected option
});