1

私は JS/JQuery を練習しており、小さなプレーヤーの画像とその横にいくつかの統計を表示するスポーツ Web サイトを作成しようとしています。この小さな画像がロールオーバーされると、別の大きな画像が右側に表示されるようにします。

画像とプレイヤー情報は表にあります。両方の画像がテーブル内にあります。ホバー時に表示したい画像はdisplay:noneに設定しています。

画像を表示させることはできますが、1 つのサムネイルをホバーするとすべての画像がスタックに表示されます。

HTML の小さなサンプルを次に示します。

<table id="roster">
    <tr>
        <th class="title" colspan=4>St. Louis Blues 2013-2014 Roster</th>
    </tr>
    <tr>
        <th class="positions" colspan=2>Forwards</th>
    </tr>
    <tr>
        <th></th>
        <th>Player</th>
        <th>Shoots</th>
        <th>Acquired</th>
    </tr>
    <tr>
        <td><span class="large" style="position:absolute;margin-left:550px;display:none;"><img src="images/backes_large.jpg" width="500px" /></span><span class="small"><img src="images/backes_small.png" alt="david backes" width="70px" /></span>
        </td>
        <td>David Backes "C"</td>
        <td>Right</td>
        <td>2003</td>
    </tr>
    <tr>
        <td><span class="large" style="position:absolute;margin-left:550px;display:none;"><img src="images/berglund_large.jpg" width="500px" /></span><span class="small"><img src="images/berglund_small.png" alt="patrik berglund" width="70px" /></span>
        </td>
        <td>Patrik Berglund</td>
        <td>Left</td>
        <td>2006</td>
    </tr>
</table>

スクリプトは次のとおりです。

$('span.small').hover(
    function () {

        $('span.large').show();
    },
    function () {
        $('span.large').hide;
    });
});

明らかに、そのテーブル行にのみある追加の画像を開きたいです。これは私が立ち往生しているところです。どんな助けでも大歓迎です。

4

1 に答える 1

0

span.large使用していて複数あるため、すべて表示されます。代わり$(this).prev()に、関連するスパンを非表示/表示するために使用します。

$('span.small').hover(
    function () { 
        $(this).prev('span.large').show();
    },
    function () {
        $(this).prev('span.large').hide();
    });
});

()また、最後の行に括弧がありません

于 2013-10-31T15:29:18.543 に答える