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（）与.on（） 。
如果已弃用.bind()则应使用.on()如果可用.bind() 。 但随着阿里纳斯- bind()是一个重写功能on() - http://james.padolsey.com/jquery/#v=2.0.3&fn=$.fn.bind （从这个答案检索actualised信息： jQuery的。 bind（）与.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');
    });
});