how to store .attr(“id”) in a variable

问题

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>

回答1:

Maybe you need to do:

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

回答2:

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/

回答3:

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();
    });
});

来源：https://stackoverflow.com/questions/18167558/how-to-store-attrid-in-a-variable

标签

jquery

variables

attr