javascript - Jquery影响所有具有相同名称的元素

Question

这是我的 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 );
 });

但是，当我将鼠标悬停在两个 block 元素之一上时，它们的不透明度都会下降，而当我将鼠标移开时，它们都会回到原始状态。我已经搜索了几个小时，而且我 100% 确定我一直在搜索不正确的术语。我该如何单独处理它们？

Answer 1

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

$("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 );
 });