fadeIn fadeOut si flag = true/false

Question

J'essaie de faire disparaître une boîte lorsque flag = true ou fadeOut lorsque flag = false. Je récupère les identifiants sur le tableau n.

Pourquoi mon drapeau est-il toujours vrai?

function setContentBox() { 
    for (var i = 0; i < jArrayText.length; i++){ 
     var flag = true; 

     if(!flag){ 
      document.getElementById(textWord[i]).onclick = function() { 
       var activeClass = $(this).find('.comment-box'); 
       activeClass.fadeOut(); 
       flag = true; 
      }; 
     }else if(flag){ 
      document.getElementById(textWord[i]).onclick = function() { 
       var activeClass = $(this).find('.comment-box'); 
       activeClass.fadeIn(); 
       flag = false; 
      }; 
     } 
    } 
} 

Answer 1

Cette ligne:

var flag = true; 

ensembles flag à true au début de chaque itération de la boucle. Vous voudriez le déplacer au-dessus du for.

Mais ce code a d'autres problèmes. Je soupçonne que c'est ce que vous cherchez:

function setContentBox() { 
    // Set flag to true *once* 
    var flag = true; 
    for (var i = 0; i < jArrayText.length; i++){ 
     // Hook the click event 
     document.getElementById(textWord[i]).onclick = function() { 
      var activeClass = $(this).find('.comment-box'); 
      // Use and update the flag 
      if (flag) { 
       activeClass.fadeIn(); 
      } else { 
       activeClass.fadeOut(); 
      } 
      flag = !flag; 
     }; 
    } 
} 

qui utilise les mêmes flag pour tous éléments. Si vous voulez un drapeau pour chaque élément, puis:

function setContentBox() { 
    for (var i = 0; i < jArrayText.length; i++){ 
     // Hook the click event 
     document.getElementById(textWord[i]).onclick = function() { 
      var activeClass = $(this).find('.comment-box'); 
      if (activeClass.data('flag')) {     // `flag` exists and is true 
       activeClass.fadeIn().data('flag', false); // Set `flag` to `false` 
      } else {          // `flag` is false or doesn't exist yet 
       activeClass.fadeOut().data('flag', true);; // Set `flag` to `true` 
      } 
     }; 
    } 
} 

(Note I inversé le sens de flag là.)

Ou, bien sûr, see Martijn's answer si vous n'avez pas réellement besoin flag du tout, juste basculer.

Answer 2

function setContentBox() { 
var flag = true; 
      for (var i = 0; i < jArrayText.length; i++){ 


       if(!flag){ 
        document.getElementById(textWord[i]).onclick = function() { 
         var activeClass = $(this).find('.comment-box'); 
         activeClass.fadeOut(); 
         flag = true; 
        }; 
       }else if(flag){ 
        document.getElementById(textWord[i]).onclick = function() { 
         var activeClass = $(this).find('.comment-box'); 
         activeClass.fadeIn(); 
         flag = false; 
        }; 

       } 
      } 
     } 

essayer cette

Answer 3

Commander fadeToggle():

function setContentBox() { 
    for (var i = 0; i < jArrayText.length; i++){ 
     document.getElementById(textWord[i]).onclick = function() { 
      $(this).find('.comment-box').fadeToggle(); 
     }; 
    } 
} 

Et cela pourrait être fait encore plus facile:

$(".YourElements").on('click', function(e){ 
    $(this).find('.comment-box').fadeToggle(); 
}); 

Answer 4

Essayez ceci:

1) fade in/fade out une boîte de commentaire sur clic d'un bouton à condition que le drapeau soit vrai

var flag = true; // if you need fade in and out effect 
    function setContentBox() { 
     for (var i = 0; i < jArrayText.length; i++){ 
       document.getElementById(textWord[i]).onclick = function() { 
        var activeClass = $(this).find('.comment-box'); 
      if(flag){ 
        activeClass.fadeToggle(); // fades in if hidden, fades out if shown     
      } 
       };  
    } 

}

2) fade in/fade out une boîte de commentaire sur un clic de quelque bouton (si elle est fondu caché et s'il est établi fade out) vous n'avez pas besoin d'un drapeau dans le cas si vous voulez pour y parvenir

function setContentBox() { 
     for (var i = 0; i < jArrayText.length; i++){ 
       document.getElementById(textWord[i]).onclick = function() { 
        var activeClass = $(this).find('.comment-box');  
        activeClass.fadeToggle(); // fades in of hidden, fades out if shown 
       };  
    } 
}