CODEWITHSUNDEEP
jqueryattributes
Vlad Vornicu
Vlad Vornicu

Reputation: 61

jQuery link elements by attribute

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/

Upvotes: 2

Views: 41

Answers (3)

EduardoFernandes
EduardoFernandes

Reputation: 3449

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");

    });
});

Upvotes: 1

Tushar
Tushar

Reputation: 87203

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

Upvotes: 1

Somnath Kharat
Somnath Kharat

Reputation: 3610

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");

        });
    });

Upvotes: 0

Related Questions