Question

我正在尝试使用jQuery生成一个小脚本，我遇到了障碍。我的脚本是关于使用类<tr>将表中每个单击的trHighlight对象转换为特定样式：

$(document).ready(function() {          
    $('tr').bind('click', function() {
    $(this).addClass('trHighlight');
    });
});

我现在尝试在再次单击表格的每一行（每个<tr>对象）时返回普通样式。我尝试了以下脚本：

$(document).ready(function() {          
    $('tr').bind('click', function() {
       $(this).addClass('trHighlight');
    });
    $('tr .trHighlight').bind('click', function() {
       $(this).removeClass('trHighlight');
    });
});

特定的if - 结构也没有那么大的帮助。你有什么想法吗？

另一个问题：您是否可以通过this.x this.id找到可以解决的所有属性的说明 - 也许我可以尝试使用“this”的类属性找到一种方法？

Answer 1

你可以使用toggleClass（）：

$(document).ready(function () {
  $('tr').bind('click', function () {
    $(this).toggleClass('trHighlight');
  });
});

可能会考虑将bind()更改为on()。两者都有效，两者的利弊都作为参考：jquery .bind() vs. .on() 如果可用，您应该使用.on()，因为.bind()已弃用。但是作为旁注 - bind()是on() - http://james.padolsey.com/jquery/#v=2.0.3&fn=$.fn.bind的重写函数（从此答案中检索到的实际信息：jquery .bind() vs. .on()

Answer 2

@matthias_h他的回答是要走的路。但是，为了完整起见，我只想通知您，您有一个浮动空间是问题所在：$('tr .trHighlight')选择一个元素（无论哪个），类trHighlight是表的后代行。你想要的是一个拥有类本身的表行，而不是它的一个后代。选择具有类的特定语义元素可以通过连接类和元素来完成，如下所示：$('tr.trHighlight')。你的最终剧本看起来就像下面那样 - 但是 - 如上所述 - matthias_h的答案是你在这种情况下应该使用的答案。

$(document).ready(function () {
    $('tr').bind('click', function () {
        $(this).addClass('trHighlight');
    });
    $('tr.trHighlight').bind('click', function () {
        $(this).removeClass('trHighlight');
    });
});

Answer 3

您对JavaScript的工作方式有些不理解。重要的是要知道JavaScript运行一次。运行后，它只会监听（并在被要求时运行功能）。

所以你当前绑定事件$('tr')和$('tr . trHighlight')（顺便说一下，标签和类名之间不应该是空格），但是{{1}类}仅在您点击trHighlight时添加。当JavaScript运行时它不存在，因此没有事件监听器附加到将删除该类的元素。

这就是为什么有一个事件委托系统。基本上，您在父静态元素上附加一个事件，它将对它进行教训，并将事件目标与其祖先进行比较。如果比较与选择器匹配，则事件将成功运行代码。

我在这里谈论.on方法，选择器作为参数。这段代码可行：

tr

但在您的情况下不建议这样做。你只是在改变一个类，jQuery有一个函数：.toggleClass。

这意味着你可以绑定$(document).ready(function() { $('table').on('click', 'tr:not(.trHighlight)', function() { $(this).addClass('trHighlight'); }); $('table').on('click', 'tr.trHighlight', function() { $(this).removeClass('trHighlight'); }); });上的单个事件，无论他是否有课程。 tr 如果需要删除或添加课程，将为您评估。这很简单：

.toggleClass

jQuery中$（this）背后的基本原理

3 个答案: