fadeIn fadeOut 如果 flag = true / false

Question

我试图在 flag = true 时淡入一个框或在 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

 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 2

这一行：

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的意思倒过来了。）

或，当然，如果您实际上根本不需要flag，只需切换即可。

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

fadeIn fadeOut 如果 flag = true / false

fadeIn fadeOut if flag = true / false

javascript

jquery

flags

angularjs