Question

我试图在flag = true或fadeOut flag = false时淡出一个方框。我从n数组中取出id。

为什么我的旗帜总是如此？

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如果您根本不需要flag，只需切换。

Answer 2

结帐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 3

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

fadeIn fadeOut如果flag = true / false

4 个答案: