如何使用 Jquery 在表中隱藏/顯示列出的按鈕之一？

Question

 <html> <head> <script> $( "#test1" ).click(function() { $(this).next("#test2").slideToggle( "slow", function() { // Animation complete. }); }); </script> </head> <body> <table> <tr> <th>Actions</th> </tr> <tr> <td> <input type="submit" name="test1" id="test1" value="TEST1" /> <br/> <input style="display: none;" type="submit" name="test2" id="test2" value="TEST2" /><br/> </td> </tr> <tr> <td> <input type="submit" name="test1" id="test1" value="TEST1" /><br/> <input style="display: none;" type="submit" name="test2" id="test2" value="TEST2" /><br/> </td> </tr> </table> </body> </html>

嗨，我想在單擊表中的 test1 按鈕后顯示或隱藏 test2 按鈕（在選定的行中）。 但是有一個問題是有幾個按鈕具有相同的 id。 是否可以顯示或隱藏選定的按鈕？ 你能幫助我嗎？ 先感謝您！

Answer 1

ID 不應該在頁面上重復，它們應該始終是唯一的。 如果您需要重復引用/元素，請將其用作類。

因此，當有人單擊具有類的按鈕（或任何東西）時，您可以將其引用為$(this)

例子：

<td> <-- this is .parent()
    <input type="submit" name="test1" class="test1" value="TEST1" /> <-- This is $(this) when clicked
    <input style="display: none;" type="submit" name="test2" class="test2" value="TEST2" /> <-- this is .find('.test2')
</td>

$(document).on('click','.test1', function() {
    $(this).parent().find('.test2').show(); <-- or hide()
})

無需<br>在您的第一個和第二個按鈕之間，因為第二個按鈕已經隱藏。

分解它

$(this) = <input type="submit" name="test1" class="test1" value="TEST1" />

.parent() = 你的第一個<td>在上面

.find('.test2') = <input style="display: none;" type="submit" name="test2" class="test2" value="TEST2" /> <input style="display: none;" type="submit" name="test2" class="test2" value="TEST2" />

.show() or .hide() = 顯示或隱藏元素

有道理？

Answer 2

您可以在不同的元素上使用相同的類名而不是相同的 id

 $(".test1").click(function() { $(this).siblings(".test2").slideToggle("slow", function() { // Animation complete. $(".test2").show() }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> </head> <body> <table> <tr> <th>Actions</th> </tr> <tr> <td> <input type="submit" name="test1" class="test1" value="TEST1" /><br/> <input style="display: none;" type="submit" name="test2" class="test2" value="TEST2" /><br/> </td> </tr> <tr> <td> <input type="submit" name="test1" class="test1" value="TEST1" /><br/> <input style="display: none;" type="submit" name="test2" class="test2" value="TEST2" /><br/> </td> </tr> </table> </body> </html>

Answer 3

如評論中所述分配一個類，並使用siblings('.someclassname')選擇兄弟部分。 通過你的代碼，如下：

 $(".buttontype1").click(function() { $(this).siblings(".buttontype2").slideToggle("slow", function() { // Animation complete. }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> <script> </script> </head> <body> <table> <tr> <th>Actions</th> </tr> <tr> <td> <input type="submit" name="test1" id="test1" value="TEST1" class="buttontype1" /><br/> <input style="display: none;" type="submit" name="test2" id="test2" value="TEST2" class="buttontype2" /><br/> </td> </tr> <tr> <td> <input type="submit" name="test1" id="test1" value="TEST1" class="buttontype1" /><br/> <input style="display: none;" type="submit" name="test2" id="test2" value="TEST2" class="buttontype2" /><br/> </td> </tr> </table> </body> </html>

如何使用 Jquery 在表中隱藏/顯示列出的按鈕之一？

問題描述

3 個解決方案

解決方案1
0 2019-02-20 07:02:42

解決方案2
0 2019-02-20 07:04:48

解決方案3
-1 已采納 2019-02-20 07:06:07

如何使用 Jquery 在表中隱藏/顯示列出的按鈕之一？

問題描述

3 個解決方案

解決方案1 0 2019-02-20 07:02:42

解決方案2 0 2019-02-20 07:04:48

解決方案3 -1 已采納 2019-02-20 07:06:07

解決方案1
0 2019-02-20 07:02:42

解決方案2
0 2019-02-20 07:04:48

解決方案3
-1 已采納 2019-02-20 07:06:07