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

Question

You guys have been very helpful before. I've been searching stackoverflow for a while now, but can't come up with an answer.

Hopefully, this is a simple question. I'm trying to store the id of the currently hovered div in a variable. Then, I want to use that variable to toggle an image with the same id.

You can see that I've tried setting the variable directly to one of the id's and that works perfectly. I've tried lots of different techniques. What am I doing wrong?

Thanks in advance for any advice!

I have a 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>

ID's must be ***unique***, you can not use the same ID twice. — adeneo, Aug 11 '13 at 00:20

Lost Left Stack · Answer 1 · 2013-08-11T00:31:09.683

4

When you get the id with the attr, it gets the name of the id, but not the # symbol associated with it. Append the # to the current id like this:

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

Also, I'd recommend changing the pshow ids to classes that can relate to the id. take a look at this fiddle: http://jsfiddle.net/CRwNr/1/

edited Aug 11 '13 at 00:31

answered Aug 11 '13 at 00:21

Lost Left Stack

1,932
13
14

I think you forgot a negation in your first sentence, where '[...] but -not- the # symbol associated with it' – Prusprus Aug 11 '13 at 00:30

score 3 · Accepted Answer · answered Aug 11 '13 at 00:19

3

Maybe you need to do:

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

answered Aug 11 '13 at 00:19

@user2671131 - you still have a major design flaw with those duplicated ID's, and should find another way to solve this. – adeneo Aug 11 '13 at 00:42
I was simply answering his immediate question. If he rephrases his question, one of us can give a more detailed answer. – Aug 11 '13 at 00:43
@remyabel - the comment was for the OP as it seemed he had no intention of fixing an error that would most likely bite him in the ass the next time he needed to select an element, I already upvoted your answer for being correct, so no problem there. – adeneo Aug 11 '13 at 01:15

d-_-b · Answer 3 · 2013-08-11T03:46:58.233

You have duplicate ID's (this will cause issues), they should really be unique.

Also, when you go to show the correct thumbnail, you're targetting its container .feature and not the images themselves. So I added .feature img. Once you fix the ID issue, you could do

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

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

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

3 Answers3

Linked