jQuery事件处理程序逻辑

Question

I'm having a problem figuring out where I'm going wrong in my code that is supposed to automatically fill in "railQuantity" for a form I am building. Currently my code only "works" when either 6ft or 8ft "fenceHeight" is selected but either way it uses the total = (Math.ceil(footage / 8) * 3); equation. It will, however, correctly blank out when I choose "Select Fence Height". So I am trying to figure out where I am going wrong with my logic so that it does not correctly use the equation for the corresponding fenceHeight. Any and all help is appreciated! Thanks you guys!

Html snippet:

Fence Description:

<select name="fenceHeight" id="fenceHeight">
    <option value="select">Select Fence Height</option>
    <option value="4" id="fH4">4 Ft.</option>
    <option value="6" id="fH6">6 Ft.</option>
    <option value="8" id="fH8">8 Ft.</option>
</select>

Javascript snippet:

//Quantity for Rails
$('#fenceHeight, #footage').bind('keypress keydown keyup change', function() {
    var footage = parseFloat($(':input[name="footage"]').val(),10);
    var total = '';
    if($(':input[name="fenceHeight"]').val() != "select"){
        if(parseFloat($(':input[name="fenceHeight"]').val() == "8")) {
            total = (Math.ceil(footage / 8)* 4);
        } 
        if(parseFloat($(':input[name="fenceHeight"]').val() == "4" || "6")) {
            total = (Math.ceil(footage / 8) * 3);
        } 
        $(':input[name="railQuantity"]').val(total.toString());
    } else {
        $(':input[name="railQuantity"]').val('');
    }
});

Answer 1

Try

var $footage = $('#footage'),
    $fenceHeight = $('#fenceHeight'),
    $railQuantity = $('input[name="railQuantity"]');
$footage.add($fenceHeight).bind('keypress keydown keyup change', function () {
    var footage = parseFloat($footage.val(), 10),
        fenceHeight = $fenceHeight.val();
    var total = '';
    if (fenceHeight != NaN) {
        if (fenceHeight == '8') {
            total = (Math.ceil(footage / 8) * 4);
        }
        if (fenceHeight == '4' || fenceHeight == '6') {
            total = (Math.ceil(footage / 8) * 3);
        }
        $railQuantity.val(total);
    } else {
        $railQuantity.val('');
    }
});

Demo: Fiddle

Answer 2

These lines are wrong:

    if(parseFloat($(':input[name="fenceHeight"]').val() == "8")) {
        total = (Math.ceil(footage / 8)* 4);
    } 
    if(parseFloat($(':input[name="fenceHeight"]').val() == "4" || "6")) {
        total = (Math.ceil(footage / 8) * 3);
    } 

You're not comparing the result of parseFloat with the strings, you're comparing the val() with the strings and passing the result of the comparison to parseFloat. And in the second one, you're comparing val() with the result of 4 || 6 4 || 6 , which is 4 -- you can't combine comparisons with or in programming languages like you can in English. Change it to:

    var height = $(':input[name="fenceHeight"]').val();
    if (height == "8") {
        total = (Math.ceil(footage / 8)* 4);
    } else if (height == "4" || height == "6") {
        total = (Math.ceil(footage / 8) * 3);
    }