尝试切换 2 个 div

Question

我找到了很多关于切换 div 的答案，但没有一个完全符合我的要求。我想要 2 个按钮（网格和列表视图）。当页面加载时，网格 div 是可见的。如果有人点击列表视图按钮，网格 div 将显示：无，列表 div 将显示：块。如果您碰巧在列表 div 已显示时再次单击列表视图按钮，则不会发生任何事情。但是，如果您单击网格视图按钮，则 div 会再次切换，反之亦然。

我设法完成的只是单击“列表视图”按钮会显示该 div，但它不会使网格视图消失。只有单击网格视图按钮才能使网格消失。我敢肯定，我在这里完全遗漏了一个逻辑，我很抱歉现在脑子有问题。但我只是感到沮丧。

这是我的代码：

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 元素，最简单的方法是向它们添加一个公共类，然后显示与单击的按钮相关的类。

要定位与按钮相关的div，您可以将id 选择器放在href 元素的href 属性中。试试这个例子：

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>