意外的遞歸-如何在點擊時停止或重置功能？

Question

我嘗試為此制作一個jsFiddle，但是它不能正常工作（我認為由於我已經設置了警報來測試我的代碼），因此希望有人可以簡單地查看我的JS並查看問題。

問題是，當您使用表單（＃verizoni516）關閉div然后重新打開它時，您收到的警報與關閉div並重新打開它的次數一樣多，而不是我想要的一個警報。 這有任何意義嗎？

這是JS：

/*--------------Validation Functions-------------------*/
    function chkradio() {
        var elem = document.forms['vzi5'].elements['element_0'];
            len = elem.length - 1;
            chkvalue = '';
            sevenPlus = false;
            fourToSix = false;
            threeMin = false;
        for (i = 0; i <= len; i++) {
            if(elem[i].checked) chkvalue = elem[i].value;   
        }
        if (chkvalue == '') {
            $('#radio-error').fadeIn('fast').effect("bounce", {times:3}, 'fast', function(){
                setTimeout(function(){
                    $('#radio-error').fadeOut('slow');}, 2000);
            });
        }
        if (chkvalue >= 7) {
            sevenPlus = true;
        } else if (chkvalue >= 4 && chkvalue <= 6) {
            fourToSix = true;
        } else {
            threeMin = true;
        }
    };
    function chkselect() {
        var elem = document.forms['vzi5'].elements['element_1'];
            len = elem.length - 1;
            chkvalue = '';
            likeNew = false;
            minProb = false;
            nonFunc = false;
        for (i = 0; i <= len; i++) {
            if (elem[i].selected) chkvalue = elem[i].value;
        }
        if (chkvalue == '') {
            elem.focus();
            $('#select-error').fadeIn('fast').effect("bounce", {times:3}, 'fast', function(){
                setTimeout(function(){
                    $('#select-error').fadeOut('slow');}, 2000);
            });
        } else if (chkvalue === 'Like New - No Functional Problems') {
            likeNew = true;
        } else if (chkvalue === 'Minor Functional Problems') {
            minProb = true;
        } else {
            nonFunc = true;
        }
    };
    function chkbox() {
        var elem = document.forms['vzi5'].elements['element_2[]'];
            chkvalue = elem.checked;
            iUnderstand = true;
        if (chkvalue === true) {
            iUnderstand;
        } else {
            iUnderstand = false;
            elem.focus();
            $('#check-error').fadeIn('fast').effect("bounce", {times:3}, 'fast', function(){
            setTimeout(function(){
                $('#check-error').fadeOut('slow');}, 2000);
        });
        }
    };
//Calling the validation functions---------------------------
$('#verizon img.apple, #unlocked img.apple').click(function(){
    $(this).closest('div').fadeOut(500).animate({"top": "-414px"}, 100).fadeIn('fast', function(){
    });
        $('#verizon516').animate({"top": "+=557px"}, 500, function(){
            $(this).animate({"top": "-=20px"}, 200);
        });
    $('div.next').click(function(){
        chkradio();
        chkselect();
        chkbox();
        if (sevenPlus === true) {
            if (likeNew === true && iUnderstand === true) {
                alert('Condition is 7+ and functions like new.');
            } else if (minProb === true && iUnderstand === true) {
                alert('Condition is 7+ and has minor functional problems');
            } else if (nonFunc === true && iUnderstand === true) {
                alert('Condition is 7+ and device does NOT function.');
            } else {

            };
        };
        if (fourToSix === true) {
            if (likeNew === true && iUnderstand === true) {
                alert('Condition is 4-6 and functions like new.');
            } else if (minProb === true && iUnderstand === true) {
                alert('Condition is 4-6 and has minor functional problems');
            } else if (nonFunc === true && iUnderstand === true) {
                alert('Condition is 4-6 and device does NOT function.');
            } else {

            };
        };
        if (threeMin === true) {
            if (likeNew === true && iUnderstand === true) {
                alert('Condition is 1-3 and functions like new.');
            } else if (minProb === true && iUnderstand === true) {
                alert('Condition is 1-3 and has minor functional problems');
            } else if (nonFunc === true && iUnderstand === true) {
                alert('Condition is 1-3 and device does NOT function.');
            } else {

            };
        };
    });
});

Answer 1

將div.next點擊處理程序移出另一個點擊處理程序，這將導致每次您單擊#verizon img.apple, #unlocked img.apple元素之一時都會注冊一個新的處理程序，該實習生被稱為另一個。

/*--------------Validation Functions-------------------*/

function chkradio() {
    var elem = document.forms['vzi5'].elements['element_0'];
    len = elem.length - 1;
    chkvalue = '';
    sevenPlus = false;
    fourToSix = false;
    threeMin = false;
    for (i = 0; i <= len; i++) {
        if (elem[i].checked) chkvalue = elem[i].value;
    }
    if (chkvalue == '') {
        $('#radio-error').fadeIn('fast').effect("bounce", {
            times: 3
        }, 'fast', function () {
            setTimeout(function () {
                $('#radio-error').fadeOut('slow');
            }, 2000);
        });
    }
    if (chkvalue >= 7) {
        sevenPlus = true;
    } else if (chkvalue >= 4 && chkvalue <= 6) {
        fourToSix = true;
    } else {
        threeMin = true;
    }
};

function chkselect() {
    var elem = document.forms['vzi5'].elements['element_1'];
    len = elem.length - 1;
    chkvalue = '';
    likeNew = false;
    minProb = false;
    nonFunc = false;
    for (i = 0; i <= len; i++) {
        if (elem[i].selected) chkvalue = elem[i].value;
    }
    if (chkvalue == '') {
        elem.focus();
        $('#select-error').fadeIn('fast').effect("bounce", {
            times: 3
        }, 'fast', function () {
            setTimeout(function () {
                $('#select-error').fadeOut('slow');
            }, 2000);
        });
    } else if (chkvalue === 'Like New - No Functional Problems') {
        likeNew = true;
    } else if (chkvalue === 'Minor Functional Problems') {
        minProb = true;
    } else {
        nonFunc = true;
    }
};

function chkbox() {
    var elem = document.forms['vzi5'].elements['element_2[]'];
    chkvalue = elem.checked;
    iUnderstand = true;
    if (chkvalue === true) {
        iUnderstand;
    } else {
        iUnderstand = false;
        elem.focus();
        $('#check-error').fadeIn('fast').effect("bounce", {
            times: 3
        }, 'fast', function () {
            setTimeout(function () {
                $('#check-error').fadeOut('slow');
            }, 2000);
        });
    }
};
//Calling the validation functions---------------------------
$('#verizon img.apple, #unlocked img.apple').click(function () {
    $(this).closest('div').fadeOut(500).animate({
        "top": "-414px"
    }, 100).fadeIn('fast', function () {});
    $('#verizon516').animate({
        "top": "+=557px"
    }, 500, function () {
        $(this).animate({
            "top": "-=20px"
        }, 200);
    });
});
//move this out of the other click handler
$('div.next').click(function () {
    chkradio();
    chkselect();
    chkbox();
    if (sevenPlus === true) {
        if (likeNew === true && iUnderstand === true) {
            alert('Condition is 7+ and functions like new.');
        } else if (minProb === true && iUnderstand === true) {
            alert('Condition is 7+ and has minor functional problems');
        } else if (nonFunc === true && iUnderstand === true) {
            alert('Condition is 7+ and device does NOT function.');
        } else {

        };
    };
    if (fourToSix === true) {
        if (likeNew === true && iUnderstand === true) {
            alert('Condition is 4-6 and functions like new.');
        } else if (minProb === true && iUnderstand === true) {
            alert('Condition is 4-6 and has minor functional problems');
        } else if (nonFunc === true && iUnderstand === true) {
            alert('Condition is 4-6 and device does NOT function.');
        } else {

        };
    };
    if (threeMin === true) {
        if (likeNew === true && iUnderstand === true) {
            alert('Condition is 1-3 and functions like new.');
        } else if (minProb === true && iUnderstand === true) {
            alert('Condition is 1-3 and has minor functional problems');
        } else if (nonFunc === true && iUnderstand === true) {
            alert('Condition is 1-3 and device does NOT function.');
        } else {

        };
    };
});

演示： 小提琴

Answer 2

這是因為您將div.next的click事件綁定到#verizon img.apple, #unlocked img.apple div.next的click事件中，所以每次單擊外部事件時，都將重新綁定內部的click事件。 通過將div.next的事件綁定div.next #verizon img.apple, #unlocked img.apple的click事件之外來解決此#verizon img.apple, #unlocked img.apple

$('#verizon img.apple, #unlocked img.apple').click(function(){
    // .. contents here
});
$('div.next').click(function(){
    // ... contents here
});

Answer 3

每次單擊$（'＃verizon img.apple，#unlocked img.apple'）時，會將click事件綁定到$（'div.next'）。 這意味着它將在每次綁定時觸發一次。 將$（'div.next'）的代碼移出$（'＃verizon img.apple，#unlocked img.apple'）單擊處理程序。