jQuery/JavaScript if语句有两个切换 [英] jQuery/JavaScript if statement for two toggles

问题描述

我在标题中有两个内容不同的切换按钮(toggle-1和toggle-2).我想防止用户同时激活两个切换(否则它们会重叠).

I have two toggles (toggle-1 and toggle-2) with different contents in a header. I would like to prevent the user to have both toggles active simultaneously (otherwise they overlap).

在下面的代码中，我尝试使用if语句来隐藏其中一个切换开关(如果另一个已经打开，但是不起作用).

In the code below I tried to use if statements to hide one of the toggles if the other is already opened but it does not work.

理想情况下，我想发生的事情是，如果切换1处于活动状态，并且用户单击切换2，则切换1将返回其原始状态，而切换2现在将处于活动状态.反之亦然.

Ideally, what I would like to happen is that if toggle-1 is active and the user clicks on toggle-2, then toggle-1 would come back to its original state and toggle-2 would be now active. The same the other way around.

我还不熟悉JavaScript，如果您能告诉我我做错了什么以及应该如何做才能获得理想的结果，我将不胜感激

I am not familiar with JavaScript yet and I'd really appreciate if you could tell me what I have done wrong and how it should be done to have my ideal result

如果您发现它更简单，请点击此处链接到我的CodePen: https://codepen.io/fergos2/pen/NWWxgE​​p

Here's the link to my CodePen if you find it easier: https://codepen.io/fergos2/pen/NWWxgEp

var myToggle

var oneToggle = $(document).ready(function() {
  $('.toggle-1').click(function() {
    $('.toggle-1').toggleClass('active')
    $('.toggle-1-content').toggleClass('active')
  })
})

var twoToggle = $(document).ready(function() {
  $('.toggle-2').click(function() {
    $('.toggle-2').toggleClass('active')
    $('.toggle-2-content').toggleClass('active')
  })
})

if (myToggle == oneToggle) {
  $(document).ready(function() {
    $('toggle-2-content').hide();
  })
} else if (myToggle == twoToggle) {
  $('toggle-1-content').hide();
}

.container {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  background-color: #eee;
}

.wrapper {
  background-color: pink;
  position: relative;
  display: flex;
  align-items: center;
}

.toggle-1,
.toggle-2 {
  display: block;
  width: 20px;
  height: 20px;
  float: left;
  cursor: pointer;
  color: white;
  text-align: center;
  background-color: green;
  margin: 10px;
}

.toggle-1.active,
.toggle-2.active {
  background-color: red;
}

.toggle-1-content,
.toggle-2-content {
  display: none;
}

.toggle-1-content.active,
.toggle-2-content.active {
  display: block;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  top: 40px;
}

.toggle-1-content.active {
  left: 0;
}

.toggle-2-content.active {
  left: 50px;
}

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

  <div class="wrapper">
    <div class="toggle-1">1</div>
    <div class="toggle-1-content">
      <p>Some content 1</p>
    </div>

    <div class="toggle-2">2</div>
    <div class="toggle-2-content">
      <p>Some content 2</p>
    </div>
  </div>

</div>

推荐答案

工作代码:

$(document).ready(function() {
  $('.toggle-1').click(function() {
    if ($('.toggle-2').hasClass('active')) {
      // remove toggle-2 active classes
      $('.toggle-2').removeClass('active');
      $('.toggle-2-content').removeClass('active');
    }
    
    $('.toggle-1').toggleClass('active');
    $('.toggle-1-content').toggleClass('active');
  });
  
  $('.toggle-2').click(function() {
    if ($('.toggle-1').hasClass('active')) {
      // remove toggle-1 active classes
      $('.toggle-1').removeClass('active');
      $('.toggle-1-content').removeClass('active');
    }
    
    $('.toggle-2').toggleClass('active');
    $('.toggle-2-content').toggleClass('active');
  });
});

这里是链接到我的工作版本.

Here is the link to my working version.

请记住以下几点:

1. 您无需多次拨打$(document).ready().

您需要以某种方式跟踪状态；因此if ($('el').hasClass('classname'))语法.正确处理后，很容易确保在单击另一个元素时将每个元素重置"为原始状态.

You need to keep track of state somehow; hence the if ($('el').hasClass('classname')) syntax. Once you handle that properly, it's easy to ensure that each element is 'reset' to its original state when the other is clicked.

希望有帮助！

这篇关于jQuery/JavaScript if语句有两个切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！