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。在mouseout上，它应该隐藏起来。

事情有效，但当我将鼠标悬停在输入id =＆＃34; 3＆＃34;时，id =＆＃34; 3＆＃34;应该出现，并非所有人都共享相同的类名。 id =＆＃34; 4＆＃34;同样如此。对于输入和div。我不想在那里对id进行硬编码，因为我的输入和div是动态生成的。

话虽如此，有没有办法实现这一目标？

感谢任何帮助！

提前谢谢

JSFiddle here： https://jsfiddle.net/pkb3q6kq/19/

Answer 1

您可以使用hover：

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/

Id必须在页面上唯一
您不需要在each循环内单独将事件绑定到每个元素，您可以使用classname绑定事件
$(this)是发生事件的元素
您可以将hover与mouseenter和mouseout

Answer 2

看看这个例子。这是jsfiddle。我不想改变你的整个代码，只需要最低限度的代码。

在您的HTML中，我只添加了data-id属性，因此您可以将它们用作唯一标识符。

<div id="3" data-id="3" class="tester">HAHAHAHAHAHAHA</div>
<div id="4" data-id="4" class="tester">Another HAHAHAHAHAHAHA</div>
<input type="text" id="3" class="bx" value="tanananna" />
<input type="text" id="2" class="bx" value="bla bla bla bla" />
<input type="text" id="1" class="bx" value="tanccccccccccccccccananna" />
<input type="text" id="2" class="bx" value="bla aaaaaaaaaaaaabla bla bla" />
<input type="text" id="1" class="bx" value="tanandasdasdasdasdaanna" />
<input type="text" id="4" class="bx" value="bla hahahahah bla bla" />

在javascript中，您只显示＆＃39; div＆＃39;这与悬停元素标识符有关。请检查以下代码。

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

    });
});

Answer 3

试试这个：

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

        });
    });

jQuery按属性链接元素

3 个答案: