Question

只是想问一个更好的方法来跟踪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>

Answer 1

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

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

    $(this).hover(
        function(){
            $(overlay).fadeIn(100);
        },
        function(){
            $(overlay).fadeOut(100);
        }
    );
});

Answer 2

你不能在你做过的地方声明一个变量 - 它在语法上是不正确的。但是，如果您在悬停范围之外声明它，则无法使用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中，但只会在触发悬停功能时存储它。

将父路径作为jquery中的变量

2 个答案: