'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标签“足球”和“足球2”可能都是板球所必需的，但只有棒球才需要“足球2”。

Answer 1

你可以试试这个

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

或者炎能够在每一个应该由你的下拉影响的元素添加类： 例如：

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