Question

我在下面显示了一些HTML，它是以ASP Classic形式动态生成的。

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

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

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

如果需要HTML可以更改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>

......看起来像是：

enter image description here

Answer 1

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

http://jsfiddle.net/muDJ9/

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

编辑：这也运行最快我刚刚对使用console.time（）分析器提交的其他人进行了测试

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

Answer 2

$("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行上升三次td> tr>表并查找img并将其属性src设置为图像。

Answer 3

您可以在

下执行此操作

<强> Live Demo

$('label[for]').closest('tr').mouseenter(function(){  
    $(this).siblings().find('img').hide();
    $(this).find('img').attr('src', $(this).find('input[type=hidden]').attr('value')).show(); 
});

JS / jQuery在Hover上更改图像

3 个答案: