如何使用带有参数的 JQuery“切换”？

Question

我有一张这样的桌子：

<table>
  <tr>
    <td><input type="button" title="Toggle" value="Show" id="btn534534" class="toggle" />    </td>
    <td>some data about ID 534534</td>
  </tr>
  <tr id="row534534" class="hiddenRow">
    <td colspan="2">some hidden data about ID 534534 that must show/hide with toggle</td>
  </tr>
  <tr>
    <td><input type="button" title="Toggle" value="Show" id="btn2423434" class="toggle" /></td>
    <td>some data about ID 2423434</td>
  </tr>
  <tr id="row2423434" class="hiddenRow">
    <td colspan="2">some hidden data about ID 2423434that must show/hide with toggle</td>
  </tr>
  <!-- many more rows here -->
</table>

有很多像上面这样的行“集”。对于每一“组”行，表中的一行是可见的。具有“hiddenRow”类的第二行在页面加载时被 JQuery 隐藏，如下所示：

$("tr.hiddenRow").hide();

现在我希望每个按钮在它之后立即切换行的可见性。请注意，可见行中的 INPUT 和隐藏行的 TR 共享一个唯一 ID。我想让按钮 onclick 调用 JQuery 函数并传递 ID，以便 JQuery 知道要切换哪一行。

有什么想法吗？我在网上找不到任何这样的例子。

Answer 1

这应该可以解决问题：

$(document).ready(function() {
    $(".toggle").click(function() {
        $(this).closest('tr').next('tr.hiddenRow').toggle(); 
    });
});

http://jsfiddle.net/DU8rd/1（感谢Šime Vidas）

注意：这不会像您所指示的那样传递 ID，但它确实会创建您描述的行为。

Answer 2

我更喜欢@Nathan的解决方案，但是如果DOM关系会变得更复杂，你会这样做：

$('#tableID input.toggle').click(function() {
    $('#row' + this.id.replace('btn', '')).toggle();
});

现场演示： http://jsfiddle.net/pHKat/1/

---

更新：与上述相同，但使用事件委托：

$('#tableID').click(function(e) {
    if (!$(e.target).hasClass('toggle')) { return; }
    $('#row' + e.target.id.replace('btn', '')).toggle();
});

这段代码多了一行代码，但在性能方面，这段代码更好，因为只绑定了一个事件处理程序（到表元素）。为了比较，我最初的解决方案（上图）为每个按钮绑定了一个事件处理程序。

Answer 3

我的第一个建议是：

"MANY ... hidden on page load" 是您使用 Javascript 来完成 CSS 的工作，它已经导致或将导致性能问题。定义：

tr.hiddenRow {
    display: none;
}

在您的样式表中，并摆脱页面加载代码。

我将使用以下代码来实现您的按钮代码：

$('input.toggle').live('click', function(ev) {
    var id = this.id.substr(3);
    var row = $('#row' + id);
    if (row.hasClass('hiddenRow'))
        row.removeClass('hiddenRow');
    else
        row.addClass('hiddenRow');
});

如果其他功能不需要行 ID，您可以通过去掉 input 和 tr 上的 ID 来减小 HTML 的大小，然后使用 DOM-walking 实现切换：

$('input.toggle').live('click', function(ev) {
    var row = $(this).parents('tr').next('tr');
    if (row.hasClass('hiddenRow'))
        row.removeClass('hiddenRow');
    else
        row.addClass('hiddenRow');
});

编辑：以前没有遇到过 jsfiddle - 这很有趣。给你：http://jsfiddle.net/z6rAe/

再次更新以包括我对 Šime 答案的更正 - 为什么 StackOverflow 不在 cmets 中编写代码？

$('#tableID').click(function(ev) {
    if (!$(ev.target).hasClass('toggle')) { return; }
    $(ev.target.id.replace('btn', '#row')).toggle();
});

http://jsfiddle.net/7Dy5s/3/

Answer 4

使用像这样的自定义方法：

    <script type="text/javascript">
        function viewToggle(id){
            $('#'+id).slideToggle(500);
        }
    </script>

然后让每个按钮调用上面的函数，传入你想要切换视图的 id 值：

<table>
  <tr>
    <td><input type="button" onclick="viewToggle('row534534');" title="Toggle" value="Show" id="btn534534" class="toggle" />    </td>
    <td>some data about ID 534534</td>
  </tr>
  <tr id="row534534" class="hiddenRow">
    <td colspan="2">some hidden data about ID 534534 that must show/hide with toggle</td>
  </tr>
  <tr>
    <td><input type="button" onclick="viewToggle('row2423434');" title="Toggle" value="Show" id="btn2423434" class="toggle" /></td>
    <td>some data about ID 2423434</td>
  </tr>
  <tr id="row2423434" class="hiddenRow">
    <td colspan="2">some hidden data about ID 2423434that must show/hide with toggle</td>
  </tr>
  <!-- many more rows here -->
</table>