jQuery 中 $(this) 背后的基本原理

Question

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

$(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') 上绑定事件（顺便说一下，标签和类名之间不应该有空格），但是只有当你点击类trHighlight 时才会添加tr。 JavaScript 运行时它不存在，因此没有将事件侦听器附加到将删除该类的元素。

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

我在这里谈论的是带有选择器作为参数的.on 方法。这段代码可以工作：

$(document).ready(function() {          
    $('table').on('click', 'tr:not(.trHighlight)', function() {
        $(this).addClass('trHighlight');
    });
    $('table').on('click', 'tr.trHighlight', function() {
        $(this).removeClass('trHighlight');
    });
});

但在您的情况下不建议这样做。您只是在更改一个类，而 jQuery 有一个功能：.toggleClass。

这意味着您可以在tr 上绑定单个事件，无论他是否有课程。 .toggleClass 如果需要删除或添加类，将为您评估。这很简单：

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