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

Question

I tried making a jsFiddle for this, but it's not working right (I think because of the alerts I have set up to test my code), so hopefully someone can simply look at my JS and see the problem.

The issue is that when you close the div with the form (#verizoni516) and then re-open it, you get as many alerts as times you have closed the div and re-opened it, instead of the ONE alert I'm intending. Does that make any sense?

Here's the 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

Move the div.next click handler out of the other click handler, it will cause a new handler to get registered every time you click on one of the #verizon img.apple, #unlocked img.apple elements which intern gets called one after another.

/*--------------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 {

        };
    };
});

Demo: Fiddle

Answer 2

This is because you are binding the click event for div.next inside the click event for #verizon img.apple, #unlocked img.apple , so every time the outer event is clicked, you are re-binding the inner click event. Fix this by moving the event binding for div.next outside the click event for #verizon img.apple, #unlocked img.apple

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

Answer 3

You are binding the click event to $('div.next') every time $('#verizon img.apple, #unlocked img.apple') is clicked. Which means it will fire once for each time it is bound. Move the code for $('div.next') out of the $('#verizon img.apple, #unlocked img.apple') click handler.