jQuery选择器无法正常工作

时间:2012-09-10 21:05:14

标签: javascript jquery

我正在使用jQuery选择器来隐藏和取消隐藏一些动态生成的HTML单元格。但是,似乎我没有选择正确的选择器。所以,如果你能给我一些建议,我很感激。

网页:

  1. 首先要求用户选择应用程序数量
  2. 根据用户选择,为每个应用程序生成两个输入字段“应用程序计时”和“应用程序日期”。
  3. “应用程序计时”中有两个选项。如果用户选择“默认”,则“应用程序日期”将消失。
  4. 问题: 当有三个以上的申请时,只有最后一个“申请日期”将消失,无论选择何时进行。我认为这是因为我没有使用正确的选择器。

    DEMO

    HTML CODE

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

    的JavaScript

    $(document).ready(function() {
        $('#id_NOA').change(function() {
    
            var total = $(this).val();
            $('.app_timing').remove();
            $('.app_dates').remove();
    
            for (var i = 1; i <= total; i++) {
    
                $('<tr class="app_timing"><th><label for="id_Apt' + i + '">Application timing ' + i + ':</label></th><td><select name="Apt' + i + '" id="id_Apt' + i + '"><option value="" selected="selected">Select an application timing</option><option value="1">Default</option><option value="2">Enter your own</option></select></td></tr>').appendTo('.table')
    
                $('<tr class="app_dates"><th><label for="id_Date_apt">Application Date ' + i + ':</label></th><td><input readonly="readonly" type="text" name="Date_apt' + i + '" value="MM/DD" id="id_Date_apt' + i + '"/><td></tr>').appendTo('.table')
    
                $('.app_timing:last').find('select').bind('change', function() {
                    if ($(this).val() == '1') {
                        $('.app_dates:last').hide()
                    //$('#id_Date_apt' + i).hide() //I tried to use ID selector, but it does not work 
                    }
    
                })
            }
        })
    
    
    })​
    

4 个答案:

答案 0 :(得分:4)

$('.app_dates:last').hide()

上面的行在change处理程序中,并且在处理程序触发之前不会执行。在它触发时,这将获得最后一个元素,这会导致您观察到的行为。您可以使用以下内容:

$(this).closest("tr").next().hide()

请注意,这是基于您当前的HTML。改变需要改变。它只是隐藏了表格中的下一行。

修改

虽然上面回答了这个问题,但总体上更好的方法是使用event delegation。这将允许您附加单个处理程序,而不是每次更改下拉列表时创建新的处理程序。 (请注意,我为每个选择添加了一个类以简化选择器)

$(".table").on("change",".timeSel",function(){
    var $this = $(this);

    if ($this.val() == '1') {
        $(this).closest("tr").next().hide();
    }
});

http://jsfiddle.net/JDFcn/11/

答案 1 :(得分:3)

替换

$('.app_dates:last').hide()

$(this).closest('.app_timing').next().hide()

:last或使用i不会起作用,因为事件将在整个for循环迭代完成后发生。

答案 2 :(得分:2)

尝试:

$('.app_timing:last').find('select').on('change', function() {
    if ($(this).val() == '1') {
        $(this).parents('tr').next('.app_dates').remove();
    }
})

<强> jsFiddle example

这将删除您更改为“默认”的行下方的行。它向上移动DOM,然后再次向下移动以找到要移除的行。

答案 3 :(得分:0)

当你的函数被调用时,它会尝试访问变量 i ,它比你在顶部下拉列表中选择的数字增加了1,所以你不能使用它。你的选择器永远不会返回任何东西。

我建议将 i 的值从 this 的id属性中拉出来,这可以在匿名函数中找到。

可能是这样的:

var idx = this.id.substring(6);   // You may want something fancier here
$('#app_dates' + idx).hide();

当我在你的jsFiddle中做出改变时,我可以让第一个消失。