jQuery選擇器無法正常工作

我正在使用jQuery選擇器來隱藏和取消隱藏一些動態生成的HTML單元格。但是，似乎我沒有選擇正確的選擇器。所以，如果你能給我一些建議，我很感激。jQuery選擇器無法正常工作

該網頁：

首先詢問用戶選擇的基礎上用戶選擇的應用程序
數，生成兩個輸入字段「應用程序的定時」，和「申請日期」的每個應用程序。
「應用程序計時」中有兩個選項。如果用戶選擇「默認」，則「申請日期」將消失。

問題：當有三個以上的應用程序，只有最後的「申請日期」將消失，不管在那裏做出選擇。我認爲這是因爲我沒有使用正確的選擇器。

HTML代碼

<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 
       } 

      }) 
     } 
    }) 


})

來源

2012-09-10 tao.hong

您正在特別選擇最後一個app_date。使用'$（'。app_dates'）'而不是'$（'。app_dates：last'）'來選擇它們全部。 –

作爲@NickG。說，雖然你在for循環中綁定了多個相同函數的事件，但認爲最好在循環外部使用它。 – dbf

@Boltclock：問題是垃圾 - 「jQuery選擇器無法正常工作」，這確實沒有問題。有些東西要求提出建議並指出問題。 '是的確如此.'對於標題/問題 – vol7ron

$('.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/

來源

2012-09-10 21:13:49

謝謝詹姆斯。有一個問題，我可以將選擇器添加到下一個括號中，對嗎？（例如next（jQuery選擇器）） –

@ tao.hong但是，您可以將它放在下一個元素之外。 –

更換

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

與

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

:last或使用i不會工作，因爲這樣的事實，整個for循環已經通過迭代後的事件發生。

來源

2012-09-10 21:11:18

'.app_dates'不是選擇的祖先。 –

@JamesMontagne謝謝，修正。 –

感謝您的幫助！ –

嘗試：

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

jsFiddle example

這將刪除該行下面你更改爲「默認」行。它沿DOM向上移動，然後再向下移動以找到要移除的行。

來源

2012-09-10 21:13:20 j08691

當你的功能被調用時，它試圖訪問變量我已經左遞增到1更比你在頂部下拉菜單中選擇的數量要多，所以你不能使用它。您的選擇器永遠不會返回任何東

我建議拉值我出這 id屬性這是在匿名函數可用。

也許是這樣的：

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

當我做你的jsfiddle這種變化，我可以得到第一個消失。

來源

2012-09-10 21:22:18 ShatyUT

jQuery選擇器無法正常工作

回答

相關問題