fadeIn fadeOut if flag = true/false

Question

我試圖褪色時flag = true或fadeOut當flag = false。 我從n數組中取出ids。

爲什麼我的旗子是真的嗎？

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

這條線：

var flag = true; 

套flag到true在每次循環的開始。你想把它移到for以上。

但該代碼還有其他問題。我懷疑這是你在找什麼：

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

使用相同flag爲所有元素。如果你想爲每個單元的標誌，那麼：

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` 
      } 
     }; 
    } 
} 

（注意我倒的flag的意義在那裏。）

或者，當然，see Martijn's answer如果你實際上並不需要根本不需要切換，只需切換即可。

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

       } 
      } 
     } 

試試這個

Answer 3

結帳fadeToggle()：

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

而這可能會更容易做來難：

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

Answer 4

試試這個：

1）淡入/淡出上點擊一個評論框的一些按鈕提供了一個標誌是真的

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）淡入/淡出一些按鈕的點擊評論框（如果它是隱藏的褪色，如果它顯示淡出）如果你想你不需要時的標誌實現這一點

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