1

只是想问一个更好的方法来跟踪 jQuery 中的父路径，目前我这样做。

$('.qBox em a').hover(
    function(){
        $(this).parent().parent().find('.overlayIMG').fadeIn(100);
    },
    function(){
        $(this).parent().parent().find('.overlayIMG').fadeOut(100);
    }
);

但我想做这样的事情（下面的代码由于某种我不知道的原因不起作用）。我不知道如何正确搜索这个问题，我已经尝试跟踪父母和父母路径但找不到答案，所以我暂时打扰你。

$('.qBox em a').hover(
    var biggerImage = $(this).parent().parent().find('.overlayIMG');
    function(){
        biggerImage.fadeIn(100);
    },
    function(){
        biggerImage.fadeOut(100);
    }
);

这是 HTML 标记

<div class="qBox">
    <em>
          <img src="images/homepagethumbOL.png" class="overlayedIcon">
          <a href="#"><img src="images/sample_box.jpg"></a>
    </em>
    <span>
        <h3><a href="#">Article Title Looks Like This or Longer</a></h3>
        <p>Curabitur zblandit tempus porttitor. Donec ullamcorper.</p>
        <a href="#">view <i>45</i> comments</a>
        </span>
    <img src="images/sampleBig.jpg" class="overlayIMG one">
</div>
4

2 回答 2

3

您可以使用each()迭代元素并.overlayIMG仅找到一次：

$('.qBox em a').each(function(){
    var overlay = $(this).parent().parent().find('.overlayIMG');

    $(this).hover(
        function(){
            $(overlay).fadeIn(100);
        },
        function(){
            $(overlay).fadeOut(100);
        }
    );
});
于 2013-07-12T09:11:38.640 回答
0

你不能在你所做的地方声明一个变量——它在语法上是不正确的。但是，如果您在悬停范围之外声明它，则不能使用this关键字。

您可以使用 jQuery 的data()功能：

$('.qBox em a').hover(
function ()
{
    var data = $(this).data(this, "data");
    if (data.img == undefined)
    {
        data = { img: $(this).parent().parent().find('.overlayIMG') };
        $(this).data(this, "data", data);
    }

    $(data.img).fadeIn(100);
},
function ()
{
    var data = $(this).data(this, "data");
    $(data.img).fadeOut(100);
});

这将存储图像参考，a但仅在触发悬停功能时才存储它。

于 2013-07-12T09:08:41.110 回答