我有<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方法。
答案 0 :(得分:2)
如果您使用jquery,则有两种可能的选项 然后会更容易。
让我们先看看jQuery的解决方案
将class="category"
应用于您要动态操作的所有元素。
将html中的值设为想要显示为data-show="nextCategory1"
申请css
.category{
display:none;
}
把这个JS函数
$('#parentCategory input').on('click',function(e){
$('.category').hide();
$('#'+$(this).data('show')).show();
});
现在让我们看看Javascript解决方案,这也是simillar的一点
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';
}
答案 1 :(得分:1)
使用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");
});
注意:这不是唯一的解决方案。