jQuery link elements by attribute

Question

I have this script:

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

    });
});

What I want to do is this: when I hover over some of these input fields, a hidden div should appear. On mouseout, it should hide back.

The thing works, but when i hover over input id="3", the div with id="3" should appear, not all of them sharing the same class name. Same goes with id="4" for both the input and the div. I don`t want to hardcode the ids in there because my inputs and divs are dynamically generated.

That being said, is there any way to achieve this taks?

Any help is appreciated!

Thank you in advance

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

Answer 1

You can use hover:

Changes in 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");
    });

Demo: https://jsfiddle.net/tusharj/pkb3q6kq/21/

1. Id must be unique on the page
2. You don't need to bind event to each element individually inside each loop, you can bind event using classname
3. $(this) inside event handler is the element on which event occured
4. You can use hover as combination of mouseenter and mouseout

Answer 2

Try this:

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

        });
    });

Answer 3

Look at this example. Here is the jsfiddle. I didn't want to change your whole code, just the minimum necessary.

In your HTML i simply added the data-id attributes so you can use them as unique identifiers.

<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" />

And in the javascript, you only show the 'div' which is related to the hovered element identifier. Check the code below.

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

    });
});