Как переключить конкретные divs с jquery

Итак, у меня есть очень ограниченное количество знаний, и я не могу найти свой ответ нигде. Я пытаюсь создать несколько кнопок, которые переключают информацию. Поэтому, когда щелкнут первый переключатель, div 1 переключается, когда я нажимаю второй переключатель div two, и предпочтительно div 1 закрывается. Мой код очень простой. Я очень новичок в этом. Прямо сейчас независимо от того, какие значения я вводил в область переключения, оба divs закрываются. Спасибо, и я надеюсь, что это имеет смысл.Как переключить конкретные divs с jquery

Вот мой код:

<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
    $("div.house").toggle(); 

    }); 
}); 
</script> 

<button>Toggle</button> 
<div class="house"> 
<p>SAMPLE TEXT ETC...</p> 
</div> 

<button>Toggle</button> 
<div class="tumble-by"> 
<p>SAMPLE TEXT ETC...</p> 
</div>

источник

2015-01-30 Vincent

Вы можете выбрать следующие родственный:

$("button").click(function(){ 
    $(this).next().toggle(); 
});

В приведенной выше коде JavaScript this ключевого слово относится к щелкнутому элементу. $(this) создает коллекцию jQuery, а метод .next() выбирает самого следующего брата элемента коллекции.

источник

2015-01-30 20:10:05 undefined

Удивительный ха-ха, это сработало отлично. У меня есть еще один вопрос, если вы могли бы помочь. Есть ли способ сделать их скрытыми до щелчка? Вместо того, чтобы начать открывать. Это было так просто, спасибо вам снова. – Vincent

@ Vincent Вы очень желанны. Вы можете добавить общий класс к целевым элементам 'div', а затем скрыть их с помощью метода' .hide() '. '$ (». TargetDivs'). Скрыть() '. Да, jQuery делает манипуляции DOM настолько простыми. Вам просто нужно изучить основы этого и сделать, нет следующего шага. – undefined

Прекрасно работает! – Vincent

Я согласен также, что сначала нужно, чтобы скрыть все дивы:

$("button").click(function() { 
    $('div').hide(); 
    $(this).next().toggle(); 
});

источник

2015-01-30 20:31:11

<script> 
    $(document).ready(function() { 
     $(document).on("click", ".js-toggle__button", function (e) { 
      $(".js-toggle__text").hide(); 
      $(this).next(".js-toggle__text").show(); 
     }); 
    }); 
</script> 

<button class="toggle__button js-toggle__button">Toggle</button> 
<div class="toggle__text js-toggle__text"> 
    <p>SAMPLE TEXT 1 ETC...</p> 
</div> 

<button class="toggle__button js-toggle__button">Toggle</button> 
<div class="toggle__text js-toggle__text"> 
    <p>SAMPLE TEXT 2 ETC...</p> 
</div>

Это лучше использовать однозначно определенные идентификаторы, когда доступ к элементам из JS (и не использовать их для CSS - используйте отдельные имена).

Ваш HTML-код в какой-то день может быть сильно изменен, и JS будет работать в любом случае, потому что он зависит от идентификаторов, но не от структуры или от имен тегов.

источник

2015-01-30 21:46:01 res

Как переключить конкретные divs с jquery

ответ

Смежные вопросы