Question

我正在使用jquery根据用户的选择复制几个html字段。但是，我遇到了一个有趣的问题。一般来说，我要求用户选择他们想要的应用程序数量：

如果只有一个应用程序：一个。需要选择应用方法（为简单起见，只有“天线”可用）;湾选择'天线'后，它会询问您进一步的信息，化学应用方法（CAM）。
如果他们选择了两个应用程序，jquery代码将为您克隆并重命名必要的问题。

我的问题是，当我选择有两个应用程序时，子问题“CAM”将不会出现。经过一些麻烦拍摄后，我发现问题可能出在这个javascript：$('.app_method:last').find('select').change(function()。该语句自动将我的循环索引增加一个（任何人都可以告诉我为什么会发生这种情况？），这与代码不匹配。

以下是我的代码的DEMO：

以下是我的HTML代码：

<div class="articles">
        <table align="center">

        <tr><th><label for="id_NOA">Number of applications:</label></th><td><select name="NOA" id="id_NOA">
            <option value="1" selected="selected">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select></td></tr>

        <tr><th><label for="id_Ap_m">Application method 1</label></th><td><select name="Ap_m" id="id_Ap_m">
            <option value="" selected="selected">Select an application method</option>
            <option value="1">Aerial</option>
        </select></td></tr>

        <tr><th><label for="id_CAM_1">Chemical application Method (CAM) 1</label></th><td><select name="CAM_1" id="id_CAM_1">
            <option value="2">2-Interception based on crop canopy</option>
            <option value="9">9-Linear foliar based on crop canop</option>
        </select></td></tr>
        </table>
 </div>

jquery代码：

$(document).ready(function() {

    //this part of code controls inputs when there is only one application
    $('#id_CAM_1').attr('id', 'id_1').closest('tr').addClass('method_options').hide();
    $('#id_Ap_m').change(function() {
        $('tr.method_options').hide();
        if ($(this).val() == "1") {
            $('#id_' + $(this).val()).closest('tr').show();
        }
    });

    i = 1;
    $('.articles').find('table').addClass('table');
    $('#id_Ap_m').closest('tr').addClass('app_method');

    $('#id_NOA').change(function() {
        var total = $(this).val();

        //remove all
        $('.app_method').each(function(index) {
            if (index != 0) $(this).remove()
        });

        //create new ones
        for (var i = 2; i <= total; i++) {
            alert('a=' + i);

            $('.app_method:first').clone().appendTo('.table').find('label').text('Application method ' + i);
            $('.app_method:last').find('select').attr('name', 'Ap_m' + i).attr('id', 'id_Ap_m' + i);
            alert('b=' + i);

            $('<tr class="method_options_1' + i + '" style="display: none;"><th><label for="id_CAM_1">Chemical application Method (CAM)' + i + '</label></th><td><select name="CAM_1_' + i + '" id="id_1_' + i + '"><option value="2">2-Interception based on crop canopy</option><option value="9">9-Linear foliar based on crop canop</option></select></td></tr>').appendTo('.table');
            alert('c=' + i);

//The following statement increase the loop index by one, which causes me problems. Can    
//anyone let me know why this could happen?
            $('.app_method:last').find('select').change(function() {
                alert('d=' + i)
                $('.method_options_1').hide();
                alert('e=' + i);

                if ($(this).val() == "1") {
                    alert('e=' + i);
                    $('.method_options_1' + i).show();
                }
            })
        }
    })
})

Answer 1

我认为这可以更简单地完成:(小提琴：http://jsfiddle.net/QaHWz/）

<!DOCTYPE html><html><head></head><body>

<table align="center"><tbody>
    <tr><th></th><td><a href="#" id="add_application">Add Application</a></td></tr>
</tbody></table>

<table id="template" style="display:none"><tbody>
    <tr>
        <th><label for="id_Ap_m_{n}">Application method {n}</label></th>
        <td>
            <select class="Ap_m" name="Ap_m_{n}" id="id_Ap_m_{n}" data-application="{n}">
                <option value="" selected="selected">Select an application method</option>
                <option value="1">Aerial</option>
            </select>
        </td></tr>
    <tr style="display:none" class="app_{n} method_1"><th><label for="id_CAM_{n}">Chemical Application Method (CAM) {n}</label></th><td><select name="CAM_{n}" id="id_CAM_{n}">
        <option value="2">2-Interception based on crop canopy</option>
        <option value="9">9-Linear foliar based on crop canopy</option>
    </select></td></tr>
</tbody></table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery(function($) {
    var applications = 0;
    $('#add_application').click(function() {
        applications++;
        var last_row = $(this).closest('tr');
        last_row.before(jQuery('#template tbody').html().replace(/{n}/g, applications));
    });
    $(document).delegate('.Ap_m', 'change', function() {
        var app = $(this).data('application');
        $('.app_'+app).hide();
        $('.app_'+app+'.method_'+this.value).show();
    });
});
</script>
</body></html>

编辑：您使用.change()时遇到的问题是您正在使用i变量，该变量在函数运行之前会增加。您需要以另一种方式将i的值放入函数中。这是一种可行的方法：

$('.app_method:last').find('select').bind('change', { row: i }, function(event) {
    var i = event.data.row;
    alert('d=' + i)
    // ...
});

{ row: i }位导致jQuery将此数据附加到传递给函数的事件对象。然后我在函数范围内创建var i，它不受i外部的影响，并将此值赋给它。

jquery动态添加html字段遇到了神秘的问题

1 个答案: