通过下拉菜单"fadeToggle"多个div标签 [英] 'fadeToggle' multiple div tags via drop down menu

问题描述

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

I need to be able to hide/show multiple div tags on the same page via a drop down menu, but I want them to use the jQuery 'fadeToggle'. I can easily do this without 'fadeToggle' by using the following code:

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>

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

But this solution isn't as elegant. Any help would be appreciated.

主要复杂之处在于，板球可能同时需要div标签"football"和"football2"，而说棒球则仅需要"football2".

The main complication is that the div tags "football" and "football2" might both be required for Cricket but only "football2" required for say Baseball.

推荐答案

您可以尝试

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

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

Or yan can add classes on every elements that should be affected by your dropdown: For example:

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

而不是定位与您的下拉操作相关联的每个元素.

And than target every element that's in link with your dropdown action.

这篇关于通过下拉菜单"fadeToggle"多个div标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！