2

我有一些下面显示的 HTML，它是在 ASP Classic 表单中动态生成的。

可以有任意数量的组/表（大小/颜色）和任意数量的行/选项。

每个组/表都有一个 img 标签，每个行/选项都有一个隐藏字段及其对应的图像 URL。

在每一行悬停时，我需要使用 JS 或 jQuery（在 ASP 经典中工作的东西）将该组图像的 src 属性更改为该行的图像 URL。

如果需要，可以更改 HTML 以使其正常工作。

谢谢你。

    <table>
    <tr>
        <td style="font-weight: 700" colspan="2">
            Color<input id="colorSortOrder" type="hidden" value="1" />
        </td>
    </tr>
    <tr>
        <td>
            <input id="radioRed" type="radio" name="Color" value="R-" />
            <label for="radioRed">
                Red</label>
            <input type="hidden" value="Image1.jpg" />
        </td>
        <td rowspan="3">
            <img />
        </td>
    </tr>
    <tr>
        <td>
            <input id="radioOrange" type="radio" name="Color" value="O-" />
            <label for="radioOrange">
                Orange</label>
            <input type="hidden" value="Image2.jpg" />
        </td>
    </tr>
    <tr>
        <td>
            <input id="radioBlue" type="radio" name="Color" value="B-" />
            <label for="radioBlue">
                Blue</label>
            <input type="hidden" value="Image3.jpg" />
        </td>
    </tr>
</table>
<table>
    <tr>
        <td style="font-weight: 700" colspan="2">
            Size<input id="sizeSortOrder" type="hidden" value="2" />
        </td>
    </tr>
    <tr>
        <td>
            <input id="radioLarge" type="radio" name="Color" value="LA-" />
            <label for="radioLarge">
                Large</label>
            <input type="hidden" value="Image4.jpg" />
        </td>
        <td rowspan="3">
            <img />
        </td>
    </tr>
    <tr>
        <td>
            <input id="radioMedium" type="radio" name="Color" value="ME-" />
            <label for="radioMedium">
                Medium</label>
            <input type="hidden" value="Image5.jpg" />
        </td>
    </tr>
    <tr>
        <td>
            <input id="radioSmall" type="radio" name="Color" value="SM-" />
            <label for="radioSmall">
                Small</label>
            <input type="hidden" value="Image6.jpg" />
        </td>
    </tr>
</table>

...看起来像：

在此处输入图像描述

4

3 回答 3

2

我会稍微更改 HTML 以通过像这样为图像 src 添加数据属性来减少所需的 JavaScript 解析

http://jsfiddle.net/muDJ9/

并使用 JavaScript 替换，您可以编辑 alt 标签的扩展

编辑：这也是我刚刚对使用 console.time() 分析器提交的其他人进行测试时运行得最快的

最后：http: //jsfiddle.net/FV9cw/

于 2012-09-04T16:24:35.483 回答
1 
$("input[type='radio']").hover(function(){
var src = $(this).parent().find("input[type='hidden']").val();
$(this).parent().parent().parent().find("img").attr("src",src);
});

第 1 行检测悬停。第 2 行到 td 并查找 td 内的隐藏输入并取值 第 3 行向上 3 次 td > tr > table 并查找 img 并使用图像设置其属性 src。

于 2012-09-04T15:51:59.183 回答
1

你可以这样做

现场演示

$('label[for]').closest('tr').mouseenter(function(){  
    $(this).siblings().find('img').hide();
    $(this).find('img').attr('src', $(this).find('input[type=hidden]').attr('value')).show(); 
});
于 2012-09-04T16:15:17.133 回答