鼠标悬停时JS / jQuery更改图片<tr>

Question

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

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

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

在每行的悬停上，我需要使用JS或jQuery（该功能在ASP classic中有效）将该组的图像的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>

...看起来像这样：

Answer 1

我将稍微更改HTML，以通过为图像src添加数据属性来减少所需的JavaScript解析，如下所示

http://jsfiddle.net/muDJ9/

并使用JavaScript Replace，您可以编辑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行上升3倍td> tr> table并查找img并为其设置属性src和图像。

Answer 3

您可以按照以下方式进行操作

现场演示

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