Как предотвратить одновременное переключение содержимого в обоих div-элементах при нажатии любой кнопки - PullRequest
Новая
       1

Как предотвратить одновременное переключение содержимого в обоих div-элементах при нажатии любой кнопки

0 голосов
/ 16 марта 2020

У меня есть рабочий код, но проблема, с которой я сталкиваюсь, заключается в том, что когда вы нажимаете первую кнопку и вторую, оба будут показывать содержимое. Я не хочу, чтобы кнопки были активны одновременно. Я хочу, чтобы они не зависели от другого значения, когда одна кнопка показывает другую, если она автоматически скрывает свое содержимое. Последняя нажатая кнопка должна иметь приоритет перед переключением предыдущей на скрытие. 

$("button").click(function() {
  $("p." + this.className).toggle("slow");
});
p {
  background: #dad;
  font-weight: bold;
  font-size: 16px;
}
<script src="https://code.jquery.com/jquery-3.4.1.js">
</script>
<button class="toggle1">Toggle 1</button>
<button class="toggle2">Toggle 2</button>
<p class="toggle1">Hiya</p>
<p class="toggle2">Such interesting text, eh?</p>

Ответы [ 4 ]

0 голосов
/ 16 марта 2020 

$("p[class*=toggle]:not(p." + this.className + ")").hide();
$("button").click(function() {
  $("p[class*=toggle]:not(p." + this.className + ")").hide();
  $("p." + this.className).toggle("slow");
});
p {
  background: #dad;
  font-weight: bold;
  font-size: 16px;
}
<script src="https://code.jquery.com/jquery-3.4.1.js">
</script>
<button class="toggle1">Toggle 1</button>
<button class="toggle2">Toggle 2</button>
<p class="toggle1">Hiya</p>
<p class="toggle2">Such interesting text, eh?</p>

Примечание: - Сначала вам нужно спрятать все divs, а затем, нажав на кнопку, вам нужно показать определенный div с помощью this функция.

0 голосов
/ 16 марта 2020

Просто скройте свои p, прежде чем показывать их. 

$("button").click(function() {
  $("p").hide();
  $("p."+this.className).toggle("slow");
});
p{
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>toggle demo</title>
  <style>
    p {
      background: #dad;
      font-weight: bold;
      font-size: 16px;
    }
  </style>
</head>

<body>
  
  <button class="toggle1">Toggle 1</button>
  <button class="toggle2">Toggle 2</button>
  <p class="toggle1">Hiya</p>
  <p class="toggle2">Such interesting text, eh?</p>

</body>
</html>
0 голосов
/ 16 марта 2020

Попробуйте это: - 

$("button").click(function() {
  $("p[class*=toggle]:not(p."+this.className+")").hide();
  $("p."+this.className).toggle("slow");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style type="text/css">
p[class*=toggle] {display:none}
p {
  background: #dad;
  font-weight: bold;
  font-size: 16px;
}
</style>

<button class="toggle1">Toggle 1</button>
<button class="toggle2">Toggle 2</button>
<button class="toggle3">Toggle 3</button>
<p class="toggle1">Hiya</p>
<p class="toggle2">Such interesting text, eh?</p>
<p class="toggle3">Another one</p>
0 голосов
/ 16 марта 2020

Вы можете сделать это с помощью функции скрытия и отображения, которая вам просто необходима для изменения кода. 

var isButtonClicked=[]
$(document).ready(function(){
  $("p").hide();
   $("button").click(function(){
      var currentClass=$(this).attr("class");
      if($.inArray(currentClass,isButtonClicked)==-1)
      {
        $("p").hide("slow");
        $("p."+currentClass).show("slow");
        isButtonClicked.push(currentClass);
      }
      else{
         alert("second time you clicked")
         $(this).hide()
      }
   })

})
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>toggle demo</title>
  <style>
    p {
      background: #dad;
      font-weight: bold;
      font-size: 16px;
    }
  </style>
</head>

<body>

  <button class="toggle1">Toggle 1</button>
  <button class="toggle2">Toggle 2</button>
  <p class="toggle1">Hiya</p>
  <p class="toggle2">Such interesting text, eh?</p>

</body>
</html>

<script src="https://code.jquery.com/jquery-3.4.1.js">

</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...