javascript - 添加包含下拉列表和动态内容的 div，以及更多 JS

Question

我正在构建一个系统，该系统使用的 JavaScript 比我习惯的要多一些，所以请原谅我的天真!

我有一个带有下拉列表和四个输入框的表单:

当用户从下拉列表中选择元素 A 时，两个字段会填充来 self 的数据库的动态数据。如果他们选择元素 B，则这两个字段将重新填充数据。这就像我想要的那样工作。

我在该 div 下方有一个按钮/链接，允许用户在其下方即时“添加”另一个 div(无页面刷新)，其中包含另一个下拉列表和四个输入框。这也可以正常工作。用户可以从下拉列表中选择一个元素，输入框会相应地改变。

问题 当用户尝试向地 block 添加第三个(或超过初始添加的任何数字)div 时，就会出现问题。下拉列表会改变第一个添加的 div 的内容，但不会影响后续的 div。我猜这与 ids 有关并且可以想象英语中发生的事情但不能将其放入任何以编程方式工作的东西中(由于我的 JS 知识有限)。

我尝试循环遍历代码的第二个实例以增加#item_select、#item_details 和#item_price，但这样做显然不是让它工作的方法，因为它没有帮助!哈哈

这是我到目前为止编写的代码:

<div class="row">
    <div class="input-field white col s3">
        <select class="browser-default" id="item_select1" name="item_select1">
            <option disabled selected value="">
                Choose an item
            </option>

            <option data-description1=
            "This is the detail for the One Page - Basic item."data-price1="500" value="1">
                Basic - One-page Site
            </option>

            <option data-description1=
            "This is the detail for the Additional Basic Pages item."data-price1="100" value="2">
                Basic - Additional Page(s)
            </option>
        </select>
    </div>

    <div class="input-field white col s4">
        <input class="validate" id="item_details1" name="item_details1" type="text">
    </div>

    <div class="input-field white col s2">
        <input class="validate" id="item_price1" name="item_price1" onkeyup="sum1();" type="text" value="_"> <label for="item_price1">Price</label>
    </div>

    <div class="input-field white col s1">
        <input class="validate" id="item_qty1" onkeyup="sum1();" type="text"> <label for="item_qty1">Qty</label>
    </div>

    <div class="input-field white col s2">
        <input class="validate" id="item_total1" type="text" value="_">
        <label for="item_total1">Total</label>
    </div>
</div>

<div id="content"></div><i class="tiny material-icons" onclick="addRow()" style="margin-bottom:50px;">add_circle_outline</i><a onclick="addRow()">add another item</a>

<script>
function addRow() {
    var div = document.createElement('div');

    div.className = 'row';

    div.innerHTML = '<div class="row"><div class="input-field col s3"><select class="browser-default" name="item_select2" id="item_select2"><option value="" disabled selected>Choose an item<\/option><option data-price2="500" data-description2="This is the detail for the One Page - Basic item." value="1">Basic - One-page Site<\/option><option data-price2="100" data-description2="This is the detail for the Additional Basic Pages item." value="2">Basic - Additional Page(s)<\/option><\/select><\/div><div class="input-field white col s4"><input id="item_details2" name="item_details2" type="text" class="validate"><\/div><div class="input-field white col s2"><input id="item_price2" name="item_price2" type="text" class="validate" value="_" onkeyup="sum2();"><\/div><div class="input-field white col s1"><input id="item_qty2" type="text" class="validate" onkeyup="sum2();"><\/div><div class="input-field white col s2"><input id="item_total2" type="text" class="validate" value="_"><\/div><\/div>\
    <i class="tiny material-icons" onclick="removeRow(this)">remove_circle<\/i><a onclick="removeRow(this)" style="color:red;"> remove above row<\/a>';
    document.getElementById('content').appendChild(div);
}

function removeRow(input) {
    document.getElementById('content').removeChild(input.parentNode);
}

$(document).ready(function() {
    $("#item_select1 option").filter(function() {
        return $(this).val() == $("#item_details1").attr('data-description1');
        return $(this).val() == $("#item_price1").attr('data-price1');
    }).attr('selected', true);

    $("#item_select1").live("change", function() {
        $("#item_details1").val($(this).find("option:selected").attr("data-description1"));
        $("#item_price1").val($(this).find("option:selected").attr("data-price1"));
    });
});

function sum1() {
    var txtFirstNumberValue = document.getElementById('item_price1').value;
    var txtSecondNumberValue = document.getElementById('item_qty1').value;
    var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
    if (!isNaN(result)) {
        document.getElementById('item_total1').value = result;
    }
}

$("#item_select1").change(function() {
    $('#item_qty1').val('');
    $('#item_total1').val('');
});

$(document).ready(function() {
    $("#item_select2 option").filter(function() {
        return $(this).val() == $("#item_details2").attr('data-description2');
        return $(this).val() == $("#item_price2").attr('data-price2');
    }).attr('selected', true);

    $("#item_select2").live("change", function() {
        $("#item_details2").val($(this).find("option:selected").attr("data-description2"));
        $("#item_price2").val($(this).find("option:selected").attr("data-price2"));
    });
});
</script>

如有任何帮助，我们将不胜感激。同样，我的 JavaScript 技能不是最好的，所以非常直接的答案(特别是如果涉及代码示例)将更加感激! :)

Answer 1

我有几个建议给你:

1) 您已经使用 HTML 创建了第一行，其他行则通过 JavaScript 创建。在一个地方完成所有操作，这将使您以后更容易维护代码。在本例中，我全部使用 JavaScript 完成。

2) 使用类别选择器 (.item_qty) 而不是 ID (#item_qty1)，然后使用 jQuery Traversing功能来找到你需要的标签。这里我用了.closest()和 .find()很多。

3) 我更喜欢将 JS 事件处理程序与 HTML 代码分开，使用 event delegation而不是 onclick 之类的。

4) .live()自 jQuery v1.9 以来，事件处理程序已被弃用和删除。您可以使用 .on()取而代之。

这是使用这些建议修改后的代码 ( JSFiddle ):

<div id="content"></div>

<i class="tiny material-icons addRowLink" style="margin-bottom:50px;">add_circle_outline</i><a class="addRowLink">add another item</a>

<script>
$(document).ready(function() {
    addRow();

    $('#content').on("change", 'select.productSelect', function() {
        $(this).closest('.row').find(".item_details").val($(this).find("option:selected").attr("data-description"));
        $(this).closest('.row').find(".item_price").val($(this).find("option:selected").attr("data-price"));
        $(this).closest('.row').find(".item_price").trigger("change");
    });

    $('#content').on('change keyup', "input.item_qty, input.item_price", function() {
        sum(this);
    });

    $(".addRowLink").on('click', function() {
        addRow();
    });

    $('#content').on('click', '.removeRowLink', function() {
        removeRow(this);
    });

});

function addRow() {
    rowNumber = $('#content .row').length + 1;

    var arr = [
        {value: '', disabled: true, selected: true, text: 'Choose an item'},
        {value: '1', "data-description": "This is the detail for the One Page - Basic item.", "data-price": 500, text: 'Basic - One-page Site'},
        {value: '2', "data-description": "This is the detail for the Additional Basic Pages item.", "data-price": 100, text: 'Basic - Additional Page(s)'},
    ];

    select = $('<select class="browser-default productSelect" name="item_select' + rowNumber + '" id="item_select' + rowNumber + '"></select>');
    $(arr).each(function() {
        select.append($("<option>", this).text(this.text));
    });

    var newRow = $('<div class="row">').append(select);

    var newhtml = '';
    newhtml += '    <div class="input-field white col s4"> \r\n';
    newhtml += '        <input class="validate item_details" name="item_details' + rowNumber + '" type="text" /> \r\n';
    newhtml += '    </div> \r\n';
    newhtml += '    <div class="input-field white col s2"> \r\n';
    newhtml += '        <input class="validate item_price" name="item_price' + rowNumber + '" type="text" value="_" /> <label for="item_price' + rowNumber + '">Price</label> \r\n';
    newhtml += '    </div> \r\n';
    newhtml += '    <div class="input-field white col s1"> \r\n';
    newhtml += '        <input class="validate item_qty" name="item_qty' + rowNumber + '" type="text" /> <label for="item_qty' + rowNumber + '">Qty</label> \r\n';
    newhtml += '    </div> \r\n';
    newhtml += '    <div class="input-field white col s2"> \r\n';
    newhtml += '        <input class="validate item_total" name="item_total' + rowNumber + '" type="text" value="_" /> \r\n';
    newhtml += '        <label for="item_total' + rowNumber + '">Total</label> \r\n';
    newhtml += '    </div> \r\n';

    newRow.append(newhtml);

    if (rowNumber > 1) {
        newRow.append('<i class="tiny material-icons removeRowLink">remove_circle</i><a class="removeRowLink" style="color:red;"> remove above row</a>');
    }

    $('#content').append(newRow);
}

function removeRow(t) {
    $(t).closest('.row').remove();
}

function sum(t) {
    row = $(t).closest('.row');
    var price = row.find('.item_price').val();
    var qty = row.find('.item_qty').val();
    var result = parseInt(price) * parseInt(qty);
    if (!isNaN(result)) {
        row.find('.item_total').val(result);
    } else {
        row.find('.item_total').val("_");
    }
}

</script>