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