1
votes

jQuery comment utiliser la fonction toggle pour élément dans la boucle for

J'utilise la fonction bascule sur 4 éléments de div . Je dois fermer le div précédent lorsque je clique sur le deuxième. Comment faire?

<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>

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

javascript jquery toggle

0 commentaires

3 Réponses :

0
votes

Essayez ce code

<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>

.hide{
display:none
}

$("div").click(function(){
  $(this).prevAll().toggle(); // toggle all previous divs
   //$(this).prevAll().addClass('hide');  // hide all previous divs
});

1 commentaires

Veuillez prendre le temps de décrire quels sont les problèmes et pourquoi cette solution est utile. N'oubliez pas que nous sommes là pour éduquer les gens, pas seulement pour leur envoyer du code.

1
votes

Vous n'avez pas besoin d'une boucle pour cela. Il vous suffit d'appeler slideUp () sur tous les autres éléments .slider-div avant de basculer celui lié au .money-transf cliqué , comme ceci:

<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>

.slider-div {
  display: none;
}

p {
  margin: 0;
}

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

Notez que j'ai changé les noms des variables $ this et $ thiz en quelque chose de plus significatif et moins facile à confondre.

p >

0 commentaires

0
votes

Vous pouvez essayer de suivre.

Masquer tous les slider-div`s au début
Dans la fonction click , masquez tous les slider-div , puis affichez le prochain élément slider-div correspondant

<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>

$(document).ready(function(){
    var transfs = $('.money-transf');
    $('.slider-div').hide();
    transfs.click(function(e){
        $('.slider-div').hide();
        $(e.currentTarget).next('.slider-div').show();
    });
})

0 commentaires