jQuery影响所有具有相同名称的元素

Question

jQuery影响所有具有相同名称的元素

3

这是我HTML文件中的代码：

    <div id="centerBlock">
        <block>
            <site style="padding-top: 10px; margin-left: 20px">
                <img src="./images/site1.png" alt="some_text"/>
            </site>
            <textOnImage style="padding-top: 10px; margin-left: 20px">
                lolol
            </textOnImage>
        </block>

        <block>
            <site style="padding-top: 163px; margin-left: 20px">
                <img src="./images/site1.png" alt="some_text"/>
            </site>
            <textOnImage style="padding-top: 163px; margin-left: 20px">
                lolol
            </textOnImage>
        </block>

    </div>

这是我的 JavaScript 代码：

$("block").mouseenter(function(){        
    $("site").fadeTo("slow", 0.25);
    $("textOnImage").animate({ 
        opacity: "1"
    }, 600 );
});

$("block").mouseleave(function(){         
    $("site").fadeTo("slow", 1);
    $("textOnImage").animate({ 
        opacity: "0"
    }, 600 );
 });

然而，当我悬停在两个块元素之一上时，它们的透明度都会降低，当我将鼠标移开时，它们会恢复到原始状态。我搜索了几个小时，并且我百分之百确定我一直在搜索错误的术语。我如何单独控制它们？

- Ridz

由于您没有指定任何特定的div id，所以该选择适用于所有内容。 - kobe

我刚接触jQuery，您能告诉我如何做到这一点吗？ - Ridz

1

这个网站非常快，而且有很多聪明的人。我正准备打答案，但是你已经找到你要找的东西了。 - kobe

已经修复了。CSS文件中的position: absolute属性造成了干扰。现在我将其放在样式中，它可以正常工作了。 - Ridz

3个回答

2

您需要遍历悬停元素的结构。您可以使用以下方式.find()...

$("block").mouseenter(function(){        
    $(this).find("site").fadeTo("slow", 0.25);
    $(this).find("textOnImage").animate({ 
        opacity: "1"
    }, 600 );
});

$("block").mouseleave(function(){         
    $(this).find("site").fadeTo("slow", 1);
    $(this).find("textOnImage").animate({ 
        opacity: "0"
    }, 600 );
 });

在事件处理程序中，this是对绑定处理程序的元素的引用。

您也可以使用.children()而不是.find()，因为目标元素只有一层深度。

顺便说一句，您可以使用.hover()，并像这样传递两个函数。

$("block").hover(function(){        
    $(this).find("site").fadeTo("slow", 0.25);
    $(this).find("textOnImage").animate({ 
        opacity: "1"
    }, 600 );
},
  function(){         
    $(this).find("site").fadeTo("slow", 1);
    $(this).find("textOnImage").animate({ 
        opacity: "0"
    }, 600 );
});

在进行fadeTo和animate调用之前，您可能还需要添加一些.stop()调用，否则当您快速鼠标移入和移出时，动画将会在队列中积压。

- user1106925

不好意思，那样做不起作用。使用find只会影响第二个“块”，而使用children也没有任何效果... - Ridz

@Ridz：您是什么意思？那么处理程序绑定到“block”，而不是“centerBlock”。 - user1106925

感谢您使代码更加紧凑。我正要寻找一些东西来停止排队的动画。但是，它只影响第二个“块”。所谓的块是指从163像素开始的元素。 - Ridz

2

尝试这样做（在jquery选择器中提供“this”上下文以定位特定的元素）：

$("block").mouseenter(function(){        
    $("site", this).fadeTo("slow", 0.25);
    $("textOnImage", this).animate({ 
        opacity: "1"
    }, 600 );
});

$("block").mouseleave(function(){         
    $("site", this).fadeTo("slow", 1);
    $("textOnImage", this).animate({ 
        opacity: "0"
    }, 600 );
 });

- Chandu

与am not i am的答案相同，它只会影响第二个“块”。 - Ridz

@Ridz：你刚刚在三个答案上留下了相同的评论。你有没有想过，既然所有的答案实际上都是一样的，那么它们可能有同样的原因呢？这里有一个演示，让你看到它的工作原理。 - user1106925

我在 CSS 文件中删除了 position:absolute 属性，现在似乎可以工作了... 有点尴尬，但还是谢谢大家 :) - Ridz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jfriend00 · Accepted Answer

使用this只针对触发事件的块，然后使用.find()在该特定块中查找所需元素。以前的做法显然是在整个页面中查找所有site元素和所有textOnImage元素，而不仅仅是在触发事件的块中查找。

$("block").mouseenter(function(){        
    var $this = $(this);
    $this.find("site").fadeTo("slow", 0.25);
    $this.find("textOnImage").animate({ 
        opacity: "1"
    }, 600 );
});

$("block").mouseleave(function(){         
    var $this = $(this);
    $this.find("site").fadeTo("slow", 1);
    $this.find("textOnImage").animate({ 
        opacity: "0"
    }, 600 );
 });