javascript - 尝试切换 2 个 div

Question

我找到了很多切换 div 的答案，但没有一个完全符合我的要求。我想要 2 个按钮(网格和 ListView )。当页面加载时，网格 div 是可见的。如果有人点击 ListView 按钮，网格 div 将显示:无，列表 div 将显示: block 。如果您碰巧在列表 div 已显示时再次单击 ListView 按钮，则不会发生任何事情。但是，如果您单击 GridView 按钮，则 div 将再次切换，反之亦然。
我设法完成的是单击“ ListView ”按钮显示该 div，但它不会使 GridView 消失。只有单击 GridView 按钮才能使网格消失。我敢肯定，我在这里完全遗漏了一个逻辑，我很抱歉现在脑子有问题。但我只是感到沮丧。
这是我的代码:

jQuery(function(){
    jQuery('.showSingle').click(function(){
          var objdiv = $('#div'+$(this).attr('target'));
          var toggleDisplay = false;
          if(objdiv.css('display')=="none"){
                toggleDisplay = true;
          }
          jQuery('.targetDiv').hide();
          jQuery('#div'+$(this).attr('target')).toggle(toggleDisplay);
    });
});

<link href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="d-grid gap-2 d-md-block">
  <a class="btn btn-primary showSingle" target="1" data-bs-toggle="button" aria-pressed="true"><i class="fas fa-th-large"></i></a>
  <a class="btn btn-primary showSingle" target="2" data-bs-toggle="button" aria-pressed="false"><i class="fas fa-list"></i></a>
</div>

<div id="div1" style="display: block;">
    Grid View Here
</div>

<div id="div2" style="display: none;">
     List view here
</div>

提前致谢。

Answer 1

您使用的逻辑比它需要的更复杂。单击按钮时，您需要做的就是隐藏所有 #divN元素，最简单的方法是向它们添加一个公共(public)类，然后显示与单击的按钮相关的类。
以div为目标相关的按钮可以放id href 中的选择器a 的属性元素。试试这个例子:

jQuery($ => {
  $('.showSingle').click(e => {
    e.preventDefault();

    $('.content').hide();
    let targetSelector = $(e.currentTarget).attr('href');
    $(targetSelector).show();
  });
});

.content { display: none; }
#div1 { display: block; }

<link href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="d-grid gap-2 d-md-block">
  <a class="btn btn-primary showSingle" href="#div1" data-bs-toggle="button" aria-pressed="true"><i class="fas fa-th-large"></i></a>
  <a class="btn btn-primary showSingle" href="#div2" data-bs-toggle="button" aria-pressed="false"><i class="fas fa-list"></i></a>
</div>

<div class="content" id="div1">Grid View Here</div>
<div class="content" id="div2">List view here</div>