javascript 如何使用jQuery切换多个div

hc8w905p 于 2023-02-07 发布在 Java

关注(0)|答案(3)|浏览(146)

我有几个div，当相应的按钮被单击时，它们应该显示/隐藏。在初始状态下，所有按钮和所有div都是可见的。当第一个按钮被单击时，只有相应的div应该是可见的。当第二个按钮被单击时，相应的div也应该是可见的。单击按钮应该切换按钮和相应的div的状态。
我不确定如果不放置cookie或本地存储令牌是否可以实现这一点，到目前为止，我已经创建了以下代码，它只允许我通过第一次单击来停用div。

$(function() {
    $('.button').click(function(){
        $(this).toggleClass('inactive');
        $('#mydiv'+$(this).attr('target')).toggle();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <button class="button" target="1">Button 1</button>
  <button class="button" target="2">Button 2</button>
  <button class="button" target="3">Button 3</button>
</div>

<div id="mydiv1">
  <p>Div 1</p>
</div>

<div id="mydiv2">
  <p>Div 2</p>
</div>

<div id="mydiv3">
  <p>Div 3</p>
</div>

JavaScript

来源：https://stackoverflow.com/questions/75358581/how-to-toggle-multiple-divs-using-jquery

3条答案

按热度按时间

20jt8wwn1#

如果只想切换刚才单击的按钮/div，首先必须将所有元素的先前状态重置为初始状态（删除类inactive并显示所有div），然后才能切换状态。

$(function() {
    $('input[type="checkbox"]').change(function() {
      let checked = $('input[type="checkbox"]:checked');
      $('.inactive').removeClass('inactive');
      
      if (checked.length == 0) {
        $('.subdiv').show();
        
        return;
      }
      
      $('input[type="checkbox"]:not(:checked)').closest('label').addClass('inactive');

      $('.subdiv').hide();
      
      checked.each(function () {
        $('#mydiv' + $(this).val()).toggle();
      });
    });
});

.inactive {
  color: red;
}

label input {
  display: none;
}

label {
  border: 1px solid gray;
  border-radius: 3px;
  padding: 2px 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <label><input type="checkbox" value="1"/>Button 1</label>
  <label><input type="checkbox" value="2"/>Button 2</label>
  <label><input type="checkbox" value="3"/>Button 3</label>
</div>

<div id="mydiv1" class="subdiv">
  <p>Div 1</p>
</div>

<div id="mydiv2" class="subdiv">
  <p>Div 2</p>
</div>

<div id="mydiv3" class="subdiv">
  <p>Div 3</p>
</div>

赞(0）回复(0）举报 2023-02-07

4uqofj5v2#

您必须先隐藏div，然后在单击右键时显示正确的div。

$(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('#mydiv' + $(this).attr('target')).toggle();
  });
});

/*
  Hide all divs that have an id starting with "mydiv"
*/

div[id^="mydiv"] {
  display: none;
}

.active {
  background-color: green;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <button class="button" target="1">Button 1</button>
  <button class="button" target="2">Button 2</button>
  <button class="button" target="3">Button 3</button>
</div>

<div id="mydiv1">
  <p>Div 1</p>
</div>

<div id="mydiv2">
  <p>Div 2</p>
</div>

<div id="mydiv3">
  <p>Div 3</p>
</div>

赞(0）回复(0）举报 2023-02-07

vuktfyat3#

你有没有使用一个切换或你也可以解决它与走动？

$(function() {
  $('.button').click(function() {
  $('.inactive').removeClass('inactive');
    $(this).toggleClass('active');
    $('.subdiv').show();
 
    $('.mydiv' + $(this).attr('target')).toggle();
  });
});

/*
  Hide all divs that have an id starting with "mydiv"
*/

.active {
  background-color: green;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <button class="button" target="1">Button 1</button>
  <button class="button" target="2">Button 2</button>
  <button class="button" target="3">Button 3</button>
</div>

<div class="mydiv1" hidden>
  <p>Div 1</p>
</div>

<div class="mydiv2" hidden>
  <p>Div 2</p>
</div>

<div class="mydiv3" hidden>
  <p>Div 3</p>
</div>

赞(0）回复(0）举报 2023-02-07

我来回答

javascript 如何使用jQuery切换多个div

3条答案

相关问题

热门标签

最新问答