javascript - JQuery 自动完成功能适用于一个部分，但不适用于另一部分

Question

我正在尝试使用 JQuery 函数来获取表单的特定更改，然后将信息插入方程中，以便表单的每个部分都自动为其创建答案。我让它的第一部分工作(帖子数量)，但无法让第二部分工作(Rails 数量)。如果有人能指出或解释我错在哪里以及如何解决它，我将不胜感激!谢谢!

这是一个 JSFiddle - http://jsfiddle.net/gv0029/ncn42/1/

HTML:

<fieldset id="fence">
    <div name="inputFence" class="inputFence">
        <legend><strong>Fence Description</strong>
        </legend>
        <label>Footage:
            <input name="footage_1" class="footage" />
        </label>
        <select name="fenceHeight_1" class="fenceHeight">
            <option value="select">Select Fence Height</option>
            <option value="6" id="fH6">6 Ft.</option>
            <option value="8" id="fH8">8 Ft.</option>
        </select>
        <legend><strong>Post Type</strong>
        </legend>
        <label>Post Quantity:
            <input name="postQuantity_1" class="postQuantity" />
        </label>
        <legend><strong>Rail Type</strong>
        </legend>
        <select name="6foc_1" class="6foc">
            <option value="select">6 Ft. on Center?</option>
            <option value="no">No</option>
            <option value="yes">Yes</option>
        </select>
        <label>Quantity:
            <input class="railQuantity" name="railQuantity_1" />
        </label>
</fieldset>
<div>
    <input type="button" id="btnAddFence" value="Add Another Fence" />
    <input type="button" id="btnDelFence" value="Remove Fence" />
</div>
</form>

JS:

//Quantity for Posts
$(document.body).on('keypress keydown keyup change', '[class^="footage"] ', function () {

    var footage = parseFloat($(this).val(), 10);
    var total = '';
    var parts = $(this).attr('name').split("_");
    var fenceNumber = parts[1];

    if (!isNaN(footage)) {
        total = Math.ceil(footage / 7);
        $(":input[name='postQuantity_" + fenceNumber + "'" + ']').val(total.toString());
    } else {
        $(":input[name='postQuantity_" + fenceNumber + "'" + ']').val("");
    }

});

//Quantity for Rails
$(document.body).on('keypress keydown keyup change', '[class^="footage"] [class^="fenceHeight"] [class^="6foc"]', function () {

    var parts = $(this).attr('name').split("_");
    var fenceNumber = parts[1];

    var footage = parseFloat($(":input[name='footage_" + fenceNumber + "'" + ']').val(), 10);
    var fenceHeight = $(":input[name='fenceHeight_" + fenceNumber + "'" + ']').val();
    var railQuantity = $(":input[name='railQuantity_" + fenceNumber + "'" + ']').val();
    var total = '';
    var sfoc = $(":input[name='6foc_" + fenceNumber + "'" + ']').val();

    if (fenceHeight = !NaN) {
        if (sfoc == "no") {

            if (fenceHeight == '8') {
                total = (Math.ceil(footage / 8) * 4);
            }
            if (fenceHeight == '6') {
                total = (Math.ceil(footage / 8) * 3);
            }
            railQuantity.val(total);
        }

        if (sfoc == "yes") {
            if (fenceHeight == '8') {
                total = (Math.ceil(footage / 12) * 4);
                railQuantity.val(total);
            }
            if (fenceHeight == '6') {
                alert("Error: 6ft on Center cannot use 6ft posts");
                railQuantity.val("ERROR");
            }
        }
    } else {
        railQuantity.val("");
    }

});

//Dynamic Fence Input Fields
$('#btnAddFence').click(function () {

    // create the new element via clone()
    var newElem = $('.inputFence:last').clone();

    // insert the new element after the last "duplicable" input field
    $('.inputFence:last').after(newElem);

    // enable the "remove" button
    $('#btnDelFence').removeAttr('disabled');

    //get the input name and split into array (assuming your clone is always last)
    var parts = $('.fenceHeight:last').attr('name').split("_");
    //change the second element of the array to be one higher
    parts[1]++;
    //join back into a string and apply to the new element
    $('.fenceHeight:last').attr('name', parts.join("_"));

    //do the same for other two inputs
    parts = $('.postQuantity:last').attr('name').split("_");
    parts[1]++;
    $('.postQuantity:last').attr('name', parts.join("_"));

    parts = $('.footage:last').attr('name').split("_");
    parts[1]++;
    $('.footage:last').attr('name', parts.join("_"));

    parts = $('.6foc:last').attr('name').split("_");
    parts[1]++;
    $('.6foc:last').attr('name', parts.join("_"));

});

$('#btnDelFence').click(function () {
    //remove the last inputFence
    $('.inputFence:last').remove();

    // if only one element remains, disable the "remove" button
    if ($('.inputFence').length == 1) $('#btnDelFence').attr('disabled', 'disabled');
});

$('#btnDelFence').attr('disabled', 'disabled');

Answer 1

您遇到了一些问题。

首先是这一行:

$(document.body).on('keypress keydown keyup change', '[class^="footage"] [class^="fenceHeight"] [class^="6foc"]',

您必须用逗号分隔不同的输入，如下所示:

$(document.body).on('keypress keydown keyup change', '[class^="footage"],[class^="fenceHeight"],[class^="6foc"]',

第二行是这一行:

var fenceHeight = $(":input[name='fenceHeight_" + fenceNumber + "'" + ']').val();

当您真正想要所选选项的值时，您正在获取选择的值:

var fenceHeight = $(":input[name='fenceHeight_" + fenceNumber + "'" + ']').find('option:selected').val();

第三行是这一行:

var railQuantity = $(":input[name='railQuantity_" + fenceNumber + "'" + ']').val();

当您在代码中实际尝试设置值的值时，您将获得这一行的值。你想要的只是元素。我已将数量留在那里，以防您稍后需要，但重新调整了 railQuantity 的用途:

var railQuantity = $(":input[name='railQuantity_" + fenceNumber + "'" + ']');
var railQuantityval = $(":input[name='railQuantity_" + fenceNumber + "'" + ']').val();

第四个是 if 语句:

if (fenceHeight = !NaN) {

你不能真的那样使用它。改用这个:

if (!isNaN(Number(fenceHeight))) {

在 if 语句中，您还可以受益于 if/else 语句，而不仅仅是 if 语句。我已经更改了这些内容以反射(reflect)这一点。

您的添加函数中还缺少我为您添加的railsQuantity 元素:

parts = $('.railQuantity:last').attr('name').split("_");
parts[1]++;
$('.railQuantity:last').attr('name', parts.join("_"));

Updated fiddle here.