显示/隐藏 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 都标有“divnumbertrigger”，例如#div2trigger；并且所有内容 div 都标有“divnumber”，例如 #div2。

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

谁能为我提供一个可行的解决方案/正确的方法来实现这一目标？

Answer 1

在这里使用类基础，所以你可以这样做：

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

所以，我们隐藏了所有的 div，然后只显示需要的 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 - 这为您提供了多个触发器-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 从 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>