Question

你们以前一直非常乐于助人。我一直在搜索stackoverflow一段时间，但无法得出答案。

希望这是一个简单的问题。我正在尝试将当前悬停的div的id存储在变量中。然后，我想使用该变量来切换具有相同id的图像。

你可以看到我已经尝试将变量直接设置为其中一个id，并且完美无缺。我尝试了很多不同的技术。我做错了什么？

提前感谢任何建议！

我这里有一个jsFiddle： 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>

Answer 1

当id获得attr时，它会获取ID的名称，但不会获得与其关联的#符号。将#附加到当前ID，如下所示：

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

另外，我建议将pshow id更改为与id相关的类。看看这个小提琴：http://jsfiddle.net/CRwNr/1/

Answer 2

也许你需要这样做：

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

Answer 3

你有重复的ID（这会导致问题），它们应该是唯一的。

此外，当您显示正确的缩略图时，您的目标是其容器.feature，而不是图像本身。所以我添加了.feature img。解决ID问题后，您可以执行

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

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

如何在变量中存储.attr（“id”）

3 个答案: