隱藏選定的項目，並顯示另一個項目，而不是從jQuery中的項目列表

我試圖從錶行列表中切換button與textbox。我正在使用asp.net mvc 4 & jquery 1.9.1。問題是我點擊的按鈕被隱藏，但文本框出現在所有行中。我的代碼如下，隱藏選定的項目，並顯示另一個項目，而不是從jQuery中的項目列表

<script> 
    $(document).ready(function() { 
     $('.btnDue').click(function() { 
      $(this).hide(); 
      $('.txtDue').show(); 
     }); 
    }); 
</script> 
<body> 
    @foreach(var item in Model.DueList) 
    { 
     <tr><td><button class="btnDue">Set Due</button>@Html.TextBoxFor(modelItem => item.due, new { @class = "txtDue", hidden = "hidden" })</td></tr> 
    } 
</body>

如何只顯示文本框，我點擊了按鈕？糟糕的需要這個幫助。 TNX。

來源

2015-05-22 Shihan Khan

它可能對使用Id屬性或可能的類來使這更容易。 – Enzero

可以使用.next function以選中下面的兄弟，因爲他們txtDue類：

$('.btnDue').click(function() { 
    $(this).hide(); 
    $(this).next('.txtDue').show(); 
});

jsFiddle

來源

2015-05-22 13:50:43 jmgross

非常感謝你，這看起來很簡單。 :) –

有很多[jQuery中的遍歷函數]（http://api.jquery.com/category/traversing/tree-traversal/）其中一些avec非常有用:) – jmgross

$(this).closest('tr').find('.txtDue').show();

來源

2015-05-22 13:48:31 Samurai

$('.txtDue')是指與類「txtDue」的所有div，這就是爲什麼它顯示所有的人，當你點擊任何鏈接。

我不知道我們正在談論多少個文本框，但如果它不是太多，那麼您可能想要給它們id，因此您可以單獨引用它們。

來源

2015-05-22 13:49:03 W3AVE

不，我不能使用id，因爲數據會不時增加，所以行數會增加。我需要一種即使行數增加也能工作的方法。謝謝。 –

我明白了。我認爲提及'下一個'或'最接近'的答案將是你最好的選擇。 – W3AVE

$（'。txtDue'）將應用於所有具有txtDue類的輸入。要引用輸入那是你已經點擊了按鈕旁邊，請嘗試：

<script> 
    $(document).ready(function() { 
     $('.btnDue').click(function() { 
      $(this).hide(); 
      $(this).siblings('.txtDue').show(); 
     }); 
    }); 
</script>

來源

2015-05-22 13:50:32 rbginge

隱藏選定的項目，並顯示另一個項目，而不是從jQ​​uery中的項目列表

回答

相關問題

隱藏選定的項目，並顯示另一個項目，而不是從jQuery中的項目列表