Question

我正在练习JS / JQuery，并尝试创建一个体育网站，显示一个小玩家形象和旁边的几个统计数据。当这个小图像翻转时，我想要一个不同的大图像出现在右边。

图片和播放器信息在表格中。两张图片都在表格内。我想要在悬停时显示的图像设置为display：none。

我可以让图像显示但是当一个缩略图悬停时它们都会出现在堆栈中。

以下是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;
    });
});

显然我想打开仅在该表行中的附加图像。这是我被困的地方。任何帮助将不胜感激。

Answer 1

所有这些内容都会显示，因为您使用的是span.large，并且其中有多个。而是使用$(this).prev()来隐藏/显示相关范围。

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

另外，你错过了最后一行的括号()

JQuery - 在悬停上显示其他图像

1 个答案: