javascript - 当单击单元格内的链接值发生变化时，如何动态更改表格行背景颜色

Question

我已经从事这个工作好几天了，但我似乎无法实现收支平衡。我有一个表格，在其中一个单元格(即最后一个单元格)中显示一系列链接。 现在，当单击时，最后一个链接中的文本值会发生变化(使用 jsf ajax 实现)，以反射(reflect)其所在行的状态，从“挂起”到“恢复”，反之亦然。我用 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")
    }

});​

现在我希望每当单击链接并且其文本值更改为“resume”时，该行背景颜色就会更改，因此我在下面编写了 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");
    }
});​

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

Answer 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");
  }
});​

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

进一步说明

作为附加建议，我会更改您正在做的事情的两件事。

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

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

$("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)。