JQuery / JavaScript, если оператор для двух переключателей - PullRequest
Новая
       22

JQuery / JavaScript, если оператор для двух переключателей

0 голосов
/ 12 октября 2019

У меня есть два переключателя (toggle-1 и toggle-2) с различным содержанием в заголовке. Я хотел бы запретить пользователю активировать оба переключателя одновременно (в противном случае они перекрываются).

В приведенном ниже коде я попытался использовать операторы if, чтобы скрыть один из переключателей, если другой уже открыт, но он не работает.

В идеале мне бы хотелось, чтобы, если активен переключатель-1, а пользователь нажимает на переключатель-2, то переключатель-1 возвращается в исходное состояние, а переключатель-2 теперь активен. ,То же самое и наоборот.

Я еще не знаком с JavaScript, и я был бы очень признателен, если бы вы могли сказать мне, что я сделал неправильно, и как это сделать, чтобы получить мой идеальный результат

Вот ссылка намой CodePen, если вам проще: 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>

Ответы [ 4 ]

1 голос
/ 12 октября 2019

Несколько вопросов.

Пожалуйста, изучите приведенный ниже код

  • слишком много $ (document.ready ... и нет необходимости хранить результат такого заявления
  • Использование атрибута данных и общего класса значительно сокращает код. СУХОЙ Не повторяйте себя
  • Я также упростил контейнеры содержимого CSS 

$(function() { // on page load
  $('.toggle').on("click", function() { // any of the toggles
    const $wrapper = $(this).closest(".wrapper");
    const id = $(this).data("id");

    $(this).toggleClass('active');      // toggle clicked div 
    const show = $(this).is(".active"); // is it active after we toggled?

    $wrapper
      .find(".toggle")        // find all toggles
      .not(this)              // exclude the one we clicked
      .removeClass("active"); // remove class

    $wrapper.find(".content").hide(); // hide any content divs

    $("#" + id).toggle(show); // show the one belonging to the clicked toggle
  })
})
.container {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  background-color: #eee;
}

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

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

.active {
  background-color: red;
}

.content {
  display: none;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  top: 40px;
}

#div1 {
  left: 0;
}

#div2 {
  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" data-id="div1">1</div>
    <div id="div1" class="content">
      <p>Some content 1</p>
    </div>

    <div class="toggle" data-id="div2">2</div>
    <div id="div2" class="content">
      <p>Some content 2</p>
    </div>
  </div>
</div>
0 голосов
/ 12 октября 2019

toggleClass принимает второй логический параметр, который включает или выключает тип переключения. Более того, вы также можете нацеливать несколько элементов с помощью одного вызова jQuery, поэтому используйте это в своих интересах, поскольку применяемые классы имеют одно и то же имя.

Таким образом, вы можете упростить свой код до 

$(document).ready(function() {
  $('.toggle-1').click(function() {
    $('.toggle-1, .toggle-1-content').toggleClass('active');
    $('.toggle-2, .toggle-2-content').toggleClass('active', false)
  })

  $('.toggle-2').click(function() {
    $('.toggle-2, .toggle-2-content').toggleClass('active');
    $('.toggle-1, .toggle-1-content').toggleClass('active', false)
  })
})
.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>
0 голосов
/ 12 октября 2019

Вы можете использовать метод "removeClass", чтобы удалить активный класс из другого переключателя 

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

var twoToggle = $(document).ready(function() {
    $(".toggle-2").click(function() {
        $(".toggle-1").removeClass("active")
        $(".toggle-1-content").removeClass("active")
        $(".toggle-2").toggleClass("active")
        $(".toggle-2-content").toggleClass("active")
    })
})
0 голосов
/ 12 октября 2019

Рабочий код:

$(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');
  });
});

Вот ссылка на мою рабочую версию.

Несколько вещей, которые следует иметь в виду:

  1. Вам не нужно звонить $(document).ready() несколько раз. Нет никакой причины вызывать его несколько раз на одной странице, поскольку событие вызывается только один раз.

  2. Вам необходимо каким-то образом отслеживать состояние;следовательно, синтаксис if ($('el').hasClass('classname')). Как только вы справитесь с этим, легко убедиться, что каждый элемент «сбрасывается» в исходное состояние при нажатии другого.

Надеюсь, что это поможет!

...