Question

我有一张看起来像这样的表。

<table>
  <thead>
    <tr>
      <th>Foo</th>
      <th>Bar</th>
    </tr>
  </thead>
  <tbody>
    <tr class="data">
      <td>Info here</th>
      <td><a href"/url_here" class="edit">Edit</a></td>
    </tr>
    <tr class="data">
      <td>More here</th>
      <td><a href"/url_here" class="edit">Edit</a></td>
    </tr>
  </tbody>
</table>

我想在鼠标悬停在其中的任何行上时显示编辑链接。我尝试了一些方法，但仍然遇到同样的问题。假设我只是想错了方法。

这就是我现在所拥有的。

$('a[class*=edit]').hide(); 

$('tr[class*=data]').bind("mouseover", function(e) {
  $(e.target).closest('a[class*=edit]').addClass("selected");
  $('a[class*=selected]:first').show();
}).mouseout(function() {
  $('a[class*=selected]').hide();
  $('a[class*=edit]').removeClass("selected");
})

现有代码存在问题，除非您将鼠标悬停在编辑链接上，否则不会添加所选类。就像我上面提到的那样，当你将鼠标悬停在那一行的任何地方时，我需要它来添加所选的类。我也只希望它显示该特定行的编辑链接。

任何帮助都会非常感激我将头发拉了几个小时，我知道它可能是愚蠢的。谢谢！

Answer 1

一些事情：

如果要为特定元素设置样式，则传递给魔法$() jQuery函数的字符串可以等同于您在CSS样式表中放置的字符串。你现在使用选择器的方式除了不太清楚外，效率极低。例如，使用=*选择器尝试在class属性中查找字符串edit where 的所有链接。因此，与abceditabc类的链接将匹配。这使得jQuery在尝试查找这些不存在的链接时做了大量工作。接受的用法是使用选择器字符串，例如a.edit，jQuery可以快速确定它是什么以及如何获取它。
每当您执行事件绑定时，this指的是事件当前在函数内部执行的元素。除非您正在进行事件委托，否则您实际上不会使用e.target。
您的代码仅在悬停直接位于链接上时才起作用的原因是因为无论何时将鼠标悬停在不同的单元格e.target上都是兄弟td。 closest无法将该td，tr传递到下一个td，直到链接。即使它确实如此，你可能也想避免这种情况，因为它没有必要。这与第二点有关，因为简单地查找从表格行下来的链接要容易得多。

因此，记住这些事情，你可以重写你拥有的东西：

$(function() {
    $('a.edit').hide(); // hide all links with a class of edit
    // act upon all table rows with a class of data
    $('tr.data').hover(function() {
        // at this point, 'this' is the table row that is being hovered
        // we can use the find function to locate the link with a class of edit
        // then add a class to it and show it.
        $(this).find('a.edit').addClass("selected").show();
    }, function() {
        // the second argument of the hover function is what should happen
        // when the mouse hovers out of the table row. In this case, we want
        // to find the link again, remove the class, and hide it.
        $(this).find('a.edit').removeClass("selected").hide();
    });
});

您可以看到此代码对您发布的HTML here起作用的代码。在FF，IE上为我工作。

进一步的建议：

始终打开jQuery documentation。它非常擅长解释事情的运作方式。
在调试jQuery时习惯使用Firefox / Firebug。当您想要查看所选内容时，在选择器中使用console.log(this);是一项无法低估的功能。

Answer 2

尝试这样的事情，假设我的逻辑正确。

$(document).ready(function() {
  $('a.edit').hide(); 
  $('tr.data').hover(function() {  
    $(this).addClass("selected").find('a.edit').show();
  }, function() {  
    $(this).removeClass("selected").find('a.edit').hide();
 });
}):

您的特定错误很可能与您正在使用遍历树的closest方法有关。

更新：代码无法正常工作的另一个可能原因是您没有使用jquery document.ready功能。我用它更新了我的代码。

在表行鼠标悬停上显示表格单元格

2 个答案: