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语句中受益。我改变了这些以反映这一点。

你也错过了add函数中的railsQuantity元素，我为你添加了：

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

Updated fiddle here.

JQuery自动完成适用于一个部分但不适用于另一个部分

1 个答案: