显示/隐藏Div组合jQuery

Question

更新 Working answer

这是关于jQuery / JS的一个非常复杂的问题 - 我发现了一个解决类似问题here的帖子，但我没有使用原始html或标签，所以代码的结构是完全不同的。

基本上我有一个需要在页面加载时隐藏的div列表，然后我需要在单击一个触发元素时显示每个div。问题是我需要在点击不同的触发元素时隐藏所有其他div。显然display: none;需要在页面加载时出现，但jQuery超出了我目前的知识。

示例：

点击此div时

<div id="div1trigger">View Div 1 Contents</div>

显示了这个div：

<div id="div1">Div 1 Content Here</div>

我使用这个JS工作：

<script>
jQuery("#div1trigger").click(function(){
    jQuery("#div1").toggle();
});
</script>

非常简单地使用.toggle（）我知道，但这是复杂的地方，我总共有5个触发div和5个内容div，每个都需要显示相应的div并同时隐藏所有其他div。

我在考虑以下内容：

<script>
jQuery("#div1trigger").click(function(){
    jQuery("#div1").toggle();
        jQuery("#div2, #div3, #div4, #div5").hide();

});
</script>

然后这^ ^ 5次以控制每个触发div（虽然我几乎可以肯定有一个更清洁/更正确的解决这个问题的方法）。

请考虑所有触发器div都标有＆＃39; divnumbertrigger＆＃39;例如#div2trigger;并且所有内容div都标有＆＃39; divnumber＆＃39;例如#div2。

最后，为了视觉参考，这里是前端的屏幕截图，以帮助可视化使用情况，所有内容div使用页面的相同区域（绿色框）和所有＆＃39; 查看 ＆＃39;按钮（红色框内）是div触发器：

任何人都可以为我提供可行的解决方案/正确的方法吗？

Answer 1

在这里使用class fundamental，所以你可以这样做：

<div id="div1" class="contentDivs">Div 1 Content Here</div>
<script>jQuery("#div1trigger").click(function() {jQuery("contentDivs").hide();
jQuery("#div1").show();});</script>

因此，我们隐藏所有div，然后只显示require div。

由于

Answer 2

选择不是＃div1的所有div你可以在jquery中使用css not selector ，然后隐藏/切换它。

    jQuery("#parentcontainer div:not(#div1)").hide();

$("#div1trigger").click(function(){
    $("#div1").toggle();
    $("#parentcontainer div:not(#div1)").hide();
});
$("#div2trigger").click(function(){
    $("#div2").toggle();
    $("#parentcontainer div:not(#div2)").hide();
});
$("#div3trigger").click(function(){
    $("#div3").toggle();
    $("#parentcontainer div:not(#div3)").hide();
});
$("#div4trigger").click(function(){
    $("#div4").toggle();
    $("#parentcontainer div:not(#div4)").hide();
});
$("#div5trigger").click(function(){
    $("#div5").toggle();
    $("#parentcontainer div:not(#div5)").hide();
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1trigger">Div 1 Trigger</div>
<div id="div2trigger">Div 2 Trigger</div>
<div id="div3trigger">Div 3 Trigger</div>
<div id="div4trigger">Div 4 Trigger</div>
<div id="div5trigger">Div 5 Trigger</div>

<div id='parentcontainer'>
  <div id="div1" class='hide'>div 1 display</div>
  <div id="div2" class='hide'>div 2 display</div>
  <div id="div3" class='hide'>div 3 display</div>
  <div id="div4" class='hide'>div 4 display</div>
  <div id="div5" class='hide'>div 5 display</div>
</div>

Answer 3

最简洁的方法是通过数据属性。从触发器链接到div - 这为您提供了一个多个trigger-div对的监听器。

对于HTML，你会这样：

<div class="divtrigger" data-div="#div1">Div 1 Trigger</div>
<div class="divtrigger" data-div="#div2">Div 2 Trigger</div>
<div class="divtrigger" data-div="#div3">Div 3 Trigger</div>
<div class="divtrigger" data-div="#div4">Div 4 Trigger</div>
<div class="divtrigger" data-div="#div5">Div 5 Trigger</div>

使用JavaScript是一个倾听者：

<script>
$(".divTrigger").click(function(){

    $($(this).attr('data-div')).toggle();
});
</script>

Answer 4

您可以使用

提取点击的触发器的ID

var divId = $(this).attr('id');

然后你可以使用

从id中提取数字部分

var divId = $(this).attr('id');

最后用它来隐藏所有其他div并切换所需的div

$("#parentcontainer div:not(#div" + divNum + ")").css('display', 'none');
$("#div" + divNum).toggle();

这是一个例子

$(".trig").click(function(){
    var divId = $(this).attr('id');
    var divNum = divId.match(/\d+/);
    $("#parentcontainer div:not(#div" + divNum + ")").css('display', 'none');
    $("#div" + divNum).toggle();
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1trigger" class="trig">Div 1 Trigger</div>
<div id="div2trigger" class="trig">Div 2 Trigger</div>
<div id="div3trigger" class="trig">Div 3 Trigger</div>
<div id="div4trigger" class="trig">Div 4 Trigger</div>
<div id="div5trigger" class="trig">Div 5 Trigger</div>

<div id='parentcontainer'>
  <div id="div1" class='hide'>div 1 display</div>
  <div id="div2" class='hide'>div 2 display</div>
  <div id="div3" class='hide'>div 3 display</div>
  <div id="div4" class='hide'>div 4 display</div>
  <div id="div5" class='hide'>div 5 display</div>
</div>