3

你们以前很有帮助。我一直在搜索 stackoverflow 一段时间，但无法找到答案。

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

您可以看到我已经尝试将变量直接设置为 id 之一，并且效果很好。我尝试了很多不同的技术。我究竟做错了什么？

提前感谢您的任何建议！

我在这里有一个 jsFiddle：http: //jsfiddle.net/SN3mz/1/

查询

$(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>
4

3 回答 3

4

当您使用 获得id时attr，它会获得 id 的名称，但不会获得#与其关联的符号。像这样将 附加#到当前 id：

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

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

于 2013-08-11T00:21:24.023 回答
3

也许你需要这样做：

$('.feature').find("#"+currentId).toggle();
于 2013-08-11T00:19:33.847 回答
2

您有重复的 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();
    });
});
于 2013-08-11T00:20:41.400 回答