意外的递归 - 如何在点击时停止或重置功能？

Question

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

问题在于，当您使用表单（＃verizoni516）关闭div然后重新打开它时，您会在关闭div并重新打开它时获得尽可能多的警报，而不是ONE警报I我打算。这有任何意义吗？

这是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 {

        };
    };
});

演示：Fiddle

Answer 2

这是因为您在div.next的click事件中绑定了#verizon img.apple, #unlocked img.apple的click事件，所以每次单击外部事件时，您都会重新绑定内部点击事件。通过在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'）点击处理程序。