意外递归 - 如何在单击时停止或重置函数

Question

我尝试为此制作一个jsFiddle，但它无法正常工作（我认为是因为我已经设置了警报来测试我的代码），所以希望有人可以简单地查看我的JS并看到问题。

问题是，当您使用表单 （#verizoni516） 关闭div 然后重新打开它时，您收到的警报数量与您关闭div 并重新打开它的次数一样多，而不是我想要的 ONE 警报。这有什么意义吗？

这是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的单击事件绑定到#verizon img.apple, #unlocked img.apple的单击事件中，因此每次单击外部事件时，都会重新绑定内部单击事件。通过将div.next的事件绑定移动到 #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'） 单击处理程序。