1

我已经做了好几天了，我似乎无法收支平衡。我有一个表格，它在其中一个单元格中显示一系列链接 - 最后一个单元格。现在单击时，最后一个链接中的文本值会发生变化（使用 jsf ajax 实现），以反映它所在行的状态，从“暂停”到“恢复”，反之亦然。每当加载文档并且文本链接显示为“恢复”时，我都使用 jQuery 来更改行的背景颜色。请参阅下文，了解我是如何实现这一点的

var defaultval;

$(" table tbody tr td:nth-child(7)").each(function() {
    defaultval = $(this).find("a:nth-child(4)").html();
    if (defaultval == "resume") {
        $(this).parents("tr").addClass("suspended")
    }

});​

现在我希望每当单击链接并且其文本值更改为“恢复”时更改此行背景颜色，所以我在下面编写了 JQuery 代码

$("table tbody tr td:nth-child(7) ").click(function() {
    if ($(this).find("a:nth-child(4)").html() !== "resume") {
        $(this).parents("tr").addClass("suspended");
    }
    else {
        $(this).parents("tr").removeClass("suspended");
    }
});​

当我单击链接时，它似乎起作用了。但问题是，当单击单元格本身和单元格内的其他链接时，它会发生变化，而链接的文本不会因为上面的实现而改变。当我这样做时：

$("table tbody tr td:nth-child(7) a:nth-child(4)").click(function() {
    if ($(this).html() !== "resume") {
        $(this).parents("tr").addClass("suspended");
    }else {
        $(this).parents("tr").removeClass("suspended");
    }
});​

它会更改一次，并且不会随着进一步的点击而变回。现在我想将此效果限制为仅在单击此链接时。感谢您期待您的回复。

4

1 回答 1

1

通过它的声音，您更改链接中文本的代码实际上完全替换了链接（a标记和所有） ......这意味着您删除了click您添加的事件侦听器。你有两个选择：

选项一

不要完全替换链接，只需更改文本及其 href (如果需要)。如果您不删除/替换原始a标签，则click侦听器将保留在原地，并在第一次点击之后捕获更多点击。以下将允许您只更改a您需要的部分。

$('table tbody tr td:nth-child(7) a:nth-child(4)')
    .attr('href', 'http://stackoverflow.com')
    .html('My new link text goes here');

选项二

将您的事件侦听器更改为使用.live或.on （取决于您使用的 jQuery 版本）。

$("table tbody tr td:nth-child(7) a:nth-child(4)").live('click', function() {
  if ($(this).html() !== "resume") {
    $(this).parents("tr").addClass("suspended");
  }else {
    $(this).parents("tr").removeClass("suspended");
  }
});​

上面所做的实际上并没有将侦听器绑定到元素，而是将其绑定到文档，并且当在文档上触发点击事件时，它会将事件冒泡，直到 jQuery 选择器匹配接收到点击的元素。这意味着您可以根据需要修改 a 链接...您甚至可以添加更多 a 标签...只要它们与您使用的 jQuery 选择器匹配，它们仍然可以正常工作。

进一步说明

作为一个额外的建议，有两件事我会改变你正在做的事情。

首先，我不会使用 :nth-child() 来定位您的元素，而是向它们添加类并以这种方式定位它们。如果您的表格曾经更改单元格或行尺寸，这将更加面向未来。

其次，$(this)在您的 JavaScript 中引用时，最好执行以下操作：

$("table tbody tr td.target-cell a.target-link").live('click', function() {
  var self = $(this);
  if (self.html() !== "resume") {
    self.parents("tr").addClass("suspended");
  }else {
    self.parents("tr").removeClass("suspended");
  }
});​

通过创建一个变量来存储$(this)你可以优化你的代码，而不是让 jQuery$(this)每次都计算。

于 2012-09-01T15:19:04.200 回答