Question

我遇到了jQuery任务的问题：我试图在滚动链接时显示“«'符号。问题是：一次只能链接一个链接，但所有这些链接都会显示“«”。

以下是代码：

$(".list td a").hover(
  function() { $(".laquo").show(); },
  function() { $(".laquo").hide(); }
);

所以，正如我所理解的，在翻过'.list td'中的'a'元素后，我的班级'。'应该显示。这工作得很好。但是我怎么告诉jQuery一次只针对一个'a'？

我尝试过类似问题的解决方案：

function() { $(".laquo", this).show(); },

但它不起作用 - “«”根本没有显示。我做错了什么？

使用HTML进行编辑：

<div class="list">
    <table>
        <tr>
            <td class="left">1.</td>
            <td>
                <a href="index.html">Circles</a>
                <span class="laquo" style="display:none;">&nbsp;&laquo;</span>
            </td>
        </tr>
    </table>
</div>

正如你所看到的，'。''不是'a'的孩子。我该如何选择呢？

Aaaand，我明白了：D。只需要删除'a'，所以我选择'td'。

感谢大家的帮助！

Answer 1

当.laquo是a的孩子时，请使用当前的a作为上下文：

$(".laquo",this).show();

如果没有，我们需要查看相关元素的HTML。

Answer 2

假设.laquo元素是链接元素的子元素：

$(".list td a").hover(function(){
    $(this).find('.laquo').toggle();
});

Answer 3

您的代码基本上是正确的，所以我假设您刚刚在代码中搞砸了一些您没有向我们展示过的内容。

悬停代码示例

$(".list td a").hover(function(){
  $(".laquo", this).show();   
}, function(){
  $(".laquo", this).hide();  
});

Link to JS Fiddle of it working

但理想情况下，此任务不应该在Javascript中完成，因为使用：hover psuedo-selector在纯CSS中实现它很容易。

Link to JSFiddle in pure CSS

在jQuery中只翻转一个元素

3 个答案: