3

皆様、以前は大変お世話になりました。しばらくの間、stackoverflow を検索してきましたが、答えが見つかりません。

うまくいけば、これは簡単な質問です。現在ホバーされている div の ID を変数に格納しようとしています。次に、その変数を使用して、同じ ID の画像を切り替えます。

変数を id の 1 つに直接設定しようとしたところ、完全に機能したことがわかります。いろいろなテクニックを試してきました。私は何を間違っていますか？

アドバイスをよろしくお願いします！

ここに jsFiddle があります: http://jsfiddle.net/SN3mz/1/

Jクエリ

$(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 が重複しています (これにより問題が発生します)。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 に答える