Question

我在表格的每一行都有两个按钮。你首先看到按钮1。单击按钮1时，它会消失，按钮2会弹出。这很简单，但我不明白如何为每一行单独创建此行为。现在它只适用于第一行。

我创建了一个codepen来更好地说明这一点：

我只知道如何使用他们的id来做这个，所以它只适用于第一行。

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

您如何让这种行为自己适用于每一行？谢谢！

Answer 1

因为id必须是唯一值document.getElementById()才会得到第一个;我认为你可以将id更改为class并添加一个param（witch row）来切换功能。或者在使用js的toggle函数中获取Sbiling节点

Answer 2

正如你所说，你有jQuery，事情变得非常简单。只需用类替换您的ID，并且对于每个单击的按钮，获取其父级范围内的第二个（即行）。 Here's the updated 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所说，问题是ids。您只能在页面上拥有1个具有相同ID的元素。

因此，要解决此问题，您可以使用类，并使用jQuery添加click事件处理程序。

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

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

以下是codepen：solution

表

3 个答案: