隐藏选定的项目，并显示另一个项目，而不是从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中的项目列表