如何在点击另一个div?</div>时切换`<div>`项

时间:2015-04-16 10:34:10

标签: javascript jquery html toggle show-hide

我有<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方法。

2 个答案:

答案 0 :(得分:2)

如果您使用jquery,则有两种可能的选项 然后会更容易。

让我们先看看jQuery的解决方案

  1. class="category"应用于您要动态操作的所有元素。

  2. 将html中的值设为想要显示为data-show="nextCategory1"

  3. 申请css

    .category{
        display:none;
    }
    
  4. 把这个JS函数

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

    现在让我们看看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';
    }  
    

    View Fiddle2

答案 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");
});

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