单击另一个div时如何切换`<div>`项目？答案

【问题标题】：How to toggle `<div>` items upon click of another div?单击另一个div时如何切换`<div>`项目？
【发布时间】：2015-04-16 10:34:10
【问题描述】：

我有这样的<div> 结构

<!-- Parent -->     
<div id="parentCategory" >
    <input type="image" src="a.jpg" onClick="showNextCat('nextCategory1', 'block', 'nextCategory2', 'nextCategory3')" />
    <input type="image" src="b.jpg" onClick="showNextCat('nextCategory2', 'block', 'nextCategory1', 'nextCategory3')" />
    <input type="image" src="c.jpg" onClick="showNextCat('nextCategory3', 'block', 'nextCategory1', 'nextCategory2')" />
    ...
</div>

<!-- 1st Child -->      
<div id="nextCategory1" style="display: none;">
    <input type="image" src="1a.jpg" />
    <input type="image" src="1b.jpg" />
</div>


<!-- 2nd Child -->      
<div id="nextCategory2"  style="display: none;">
    <input type="image" src="2a.jpg" />
    <input type="image" src="2b.jpg" />
</div>  


<!-- 3rd Child -->      
<div id="nextCategory3"  style="display: none;">
    <input type="image" src="3a.jpg" />
    <input type="image" src="3b.jpg" />
</div>

我的 JS

function showNextCat(id, visibility, h1, h2) {
    var item = document.getElementById(id);
    document.getElementById(h1).style.display = "none";
    document.getElementById(h2).style.display = "none";

    if (item.style.display !== "none") {
        item.style.display = "none";
    }
    else {
        item.style.display = visibility;    
    }   
}

我不想硬编码 showNextCat() 方法来隐藏 non-selected <div>

请即兴JS方法。

【问题讨论】：

可以使用jQuery提供的toggleClass( className )
你也不应该想使用内联 JS，你知道的......如果你打算使用 jQuery，是时候几乎完全重写你的 JS 代码了。
好的，谢谢@Rakesh 和@Regent。我将使用jQuery toggleClass...任何链接或示例？
@ShadabMehdi 类似于this fiddle。

标签： javascript jquery html toggle show-hide

【解决方案1】：

如果您使用 jquery，则有 2 个可能的选项那么就容易多了。

我们先看看jQuery的解决方案

将class="category" 应用于您要动态操作的所有元素。
将值放入 html 想要显示为 data-show="nextCategory1"
应用 css
```
.category{
    display:none;
}
```

放这个JS函数

$('#parentCategory input').on('click',function(e){
    $('.category').hide();
    $('#'+$(this).data('show')).show();
});

View Fiddle

现在让我们看看也有点类似的 Javascript 解决方案

function showNextCat(id) {
var item = document.getElementById(id);
var elem = document.querySelectorAll(".category")
var i;
for (i = 0; i < elem.length; i++) {
    elem[i].style.display='none';
}
    item.style.display='block';
}

View Fiddle2

【讨论】：

【解决方案2】：

使用 jQuery 可以让这一切变得简单。首先要做的是从按钮中删除所有onClick 事件。然后，您必须为选定的 div 定义一个 css 类：

.selected  {
   display : block;
}

然后在按钮上，指定相关类别的id，例如

<input type="image" src="a.jpg" select-category="nextCategory1" />

您现在需要做的就是为所有按钮定义点击事件

$("[select-category]").click(function () {
    $("#" + $(this).attr("select-category")).toggleClass("selected");
});

注意：这不是唯一的解决方案。

【讨论】：