顯示/隱藏表中每一行的按鈕

Question

表格的每一行都有兩個按鈕。 您首先會看到按鈕1。 單擊按鈕1時，它消失並且按鈕2彈出。 這很簡單，但是我不明白如何為每一行分別創建此行為。 現在，它僅適用於第一行。

我創建了一個代碼筆來更好地說明這一點：

http://codepen.io/cavanflynn/pen/qdVorB

我只了解如何使用其ID來執行此操作，因此它僅適用於第一行。

var first = document.getElementById( 'first' ),
second = document.getElementById( 'second' );

您將如何使這種行為單獨適用於每一行？ 謝謝！

Answer 1

因為id必須是唯一的值document.getElementById()將獲得第一個；我認為您可以將id更改為class並添加param（witch row）以切換功能。 或者在使用js的切換功能中獲取Sbiling節點

Answer 2

正如您說的那樣，有了jQuery，事情就變得非常簡單。 只需將您的ID替換為類，對於每個單擊的按鈕，將第二個添加到其父級（即該行）的范圍內。 這是更新的codepen 。

$('.first').click(function() {
  $(this).hide();
  // Using .css() instead of .show() because .show() would render the button with its default display (inline) instead of block.
  $(this).parent().find('.second').css('display', 'block');
});

Answer 3

就像@casimiryang所說，問題是id。 您在頁面上只能有1個具有相同ID的元素。

因此，要解決該問題，您可以改用類，並在jQuery中添加click事件處理程序。

$(".first").on("click", function(){
  $(this).hide();
  $(this).next().show();
});

$(".second").on("click", function(){
  $(this).hide();
  $(this).prev().show();
});

這是codepen： 解決方案