Geek Answers Handbook

How to store .attr ("id") in a variable

You guys have been very helpful before. I have been looking for stackoverflow for some time, but can't answer.

Hope this is a simple question. I am trying to save the id of the current hovering div in a variable. Then I want to use this variable to switch the image with the same identifier.

You can see that I tried to set the variable directly to one of the identifiers and it works fine. I tried many different methods. What am I doing wrong?

Thanks in advance for any advice!

I have jsFiddle here: http://jsfiddle.net/SN3mz/1/

JQuery

$(document).ready(function () {
    $('.hover').mouseenter(function() {
    var currentId = $(this).attr("id");
//  var currentId = "#story1";
    $('.pshow').hide();
    $('.feature').find(currentId).toggle();
    });
});

HTML

<div class="row-fluid" id="homepage-spotlight">

<div class="feature" align="center">
    <img class="pshow" id="preview" src="http://i.imgur.com/yuiHc20.png" alt=""/>
    <img class="pshow" id="story1" style="display:none" src="#" />
    <img class="pshow" id="story2" style="display:none" src="#" />
    <img class="pshow" id="story3" style="display:none" src="#" />
    <img class="pshow" id="story4" style="display:none" src="#" />
</div>

<div class="jdlthumbnail">
    <div class="jdlh2"><span>Large Image Features Will Give More Pop.</span>
    <div style="font-size:17px">by Ebenezer Ekuban</div>
</div>

<div class="hover"  id="story1">
    <a href="#"><h2 class="jdlh2b">Story #1 Text<br>Teaser</h2></a>
</div>

<div class="hover"  id="story2">
    <a href="#"><h2 class="jdlh2b">Story #2 Text<br>Teaser</h2></a>
</div>

<div class="hover"  id="story3">
    <a href="h#"><h2 class="jdlh2b">Story #3 Text<br>Teaser</h2></a>
</div>

<div class="hover"  id="story4">
    <a href="#"><h2 class="jdlh2b">Story #4 Text<br>Teaser</h2></a>
</div>

</div>
</div>
+3
source share
3 answers

Perhaps you need to do:

$('.feature').find("#"+currentId).toggle();
+3
source

id attr, , #. # id :

$('.feature').find('#' + currentId).toggle();

, pshow , . : http://jsfiddle.net/CRwNr/1/

+4

You have a duplicate ID (this will cause problems), they must be truly unique.

Also, when you show the correct thumbnail, you are targeting your container .feature, not the images themselves. So I added .feature img. After fixing the problem with the identifier, you can do

$('.feature').hide().find( '#' + $(this).attr('id') ).show().

$(document).ready(function () {
    $('.hover').mouseenter(function() {
        var currentId = $(this).attr("id");
        $('.pshow').hide();
        $('.feature img#' + currentId).show();
    });
});
+2
source

More articles:


All Articles