jQuery 按属性链接元素

Question

我有这个脚本:

$('.bx').each(function () {
    $(this).mouseover(function () {
        $(this).css("background-color", "blue");
        if (this.id == $('.tester').attr("id")) {
            $('div.tester').css("display", "inline-block");
        }
    });
    $(this).mouseout(function () {
        $(this).css("background-color", "white");
        $('.tester').css("display", "none");

    });
});

我想要做的是:当我将鼠标悬停在其中一些输入字段上时，应该会出现一个隐藏的 div。鼠标移开时，它应该隐藏回来。

事情是有效的，但是当我将鼠标悬停在输入 id="3"上时，应该出现 id="3"的 div，而不是所有这些都共享相同的类名。输入和 div 的 id="4"也是如此。我不想对其中的 id 进行硬编码，因为我的输入和 div 是动态生成的。

话虽这么说，有什么办法可以实现这一目标吗？

感谢任何帮助!

提前谢谢

JSFiddle 在这里: https://jsfiddle.net/pkb3q6kq/19/

Answer 1

您可以使用悬停:

HTML 中的更改:

<div id="message_3" class="tester">HAHAHAHAHAHAHA</div>
         ^^^^^^^^^
<div id="message_4" class="tester">Another HAHAHAHAHAHAHA</div>
         ^^^^^^^^^

Javascript:

$('.bx').hover(function () {
        $(this).css("background-color", "blue");

        $('#message_' + $(this).attr('id')).show();
    },

    function () {
        $(this).css("background-color", "white");
        $('.tester').css("display", "none");
    });

演示:https://jsfiddle.net/tusharj/pkb3q6kq/21/

1. Id 在页面上必须唯一
2. 您不需要在 each 循环中单独将事件绑定(bind)到每个元素，您可以使用类名绑定(bind)事件
事件处理程序中的
3. $(this)是发生事件的元素
4. 您可以将 hover 用作 mouseenter 和 mouseout 的组合