Как использовать функцию переключения для элемента в цикле - PullRequest
Новая
       9

Как использовать функцию переключения для элемента в цикле

0 голосов
/ 09 января 2019

Я использую функцию переключения для 4 div элементов. Мне нужно закрыть prev div, когда я нажимаю второй. Как я могу это сделать? 

$(document).ready(function() {
  var $this = $(document).find('.slider-div');
  var $thiz = $('.money-transf');

  $('.money-transf').click(function(e) {
    for (var i = 0; i < $this.length; i++) {
      // here i need to add toggle function to $this[i] elements;
    }
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='money-transf'>
  <p>Element</p>
</div>
<div class='slider-div'>
  <p>Inform about element</p>
</div <div class='money-transf'>
<p>Element2</p>
</div>
<div class='slider-div'>
  <p>Inform about element2</p>
</div>

Ответы [ 3 ]

0 голосов
/ 09 января 2019

Вам не нужен цикл для этого. Вам просто нужно вызвать slideUp() на всех других .slider-div элементах, прежде чем переключать тот, который связан с нажатым .money-transf, например: 

$(document).ready(function() {
  var $slider = $('.slider-div');
  var $transf = $('.money-transf');

  $transf.click(function(e) {
    var $target = $(this).next('.slider-div');
    $slider.not($target).slideUp();
    $target.slideToggle();
  });
})
.slider-div {
  display: none;
}

p {
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="money-transf">
  <p>Element</p>
</div>
<div class="slider-div">
  <p>Inform about element</p>
</div>
<div class="money-transf">
  <p>Element2</p>
</div>
<div class="slider-div">
  <p>Inform about element2</p>
</div>

Обратите внимание, что я изменил имена переменных $this и $thiz на что-то более значимое и менее простое для путаницы.

0 голосов
/ 09 января 2019

Вы можете попробовать следующее.

  • Скрыть все слайд-дивы в начале
  • В функции click скрыть все ползунка div , а затем показать следующий соответствующий элемент ползунка div 

$(document).ready(function(){
    var transfs = $('.money-transf');
    $('.slider-div').hide();
    transfs.click(function(e){
        $('.slider-div').hide();
        $(e.currentTarget).next('.slider-div').show();
    });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='money-transf'>
    <p>Element</p>
</div>
<div class='slider-div'>
    <p>Inform about element</p>
</div>
<div class='money-transf'>
    <p>Element2</p>
</div>
<div class='slider-div'>
    <p>Inform about element2</p>
</div>
0 голосов
/ 09 января 2019

Попробуйте этот код 

$("div").click(function(){
  $(this).prevAll().toggle(); // toggle all previous divs
   //$(this).prevAll().addClass('hide');  // hide all previous divs
});
.hide{
display:none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='money-transf'>
    <p>Element</p>
</div>
<div class='slider-div '>
    <p>Inform about element</p>
</div>
<div class='money-transf '>
    <p>Element2</p>
</div>
<div class='slider-div '>
    <p>Inform about element2</p>
</div>
...