2

ASP Classic フォームで動的に生成される HTML を以下に示します。

行/オプションの数に関係なく、グループ/テーブル (サイズ/色) の数に制限はありません。

各グループ/テーブルには 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

このように画像 src のデータ属性を追加することで、必要な JavaScript 解析を減らすために、HTML を少し変更します。

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 内の非表示の入力を探し、値を取得します。

于 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 に答える