1

我正在练习 JS/JQuery 并尝试创建一个体育网站，该网站显示一个小型球员图像和旁边的几个统计数据。当这个小图像翻转时，我希望右侧出现一个不同的大图像。

图像和播放器信息在表格中。两张图片都在表格内。我想在悬停时出现的图像设置为 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 回答