fadeIn fadeOut if flag = true / false

Question

Я пытаюсь выгнать коробку, когда flag = true или исчезать, когда flag = false, Я выбираю идентификаторы из массива n.

Почему мой флаг всегда верный?

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 там.)

Или, конечно, посмотрите ответ Мартейна, если вам на самом деле не нужно 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 
                };       
    }
}