[Javascript] JS / jQuery Cambia immagine al passaggio del mouse su <tr>


Answers

Puoi farlo come sotto

Dimostrazione dal vivo

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

Di seguito viene mostrato un codice HTML, che viene generato dinamicamente in un modulo ASP Classic.

Ci può essere una quantità qualsiasi di gruppi / tabelle (dimensione / colore) con qualsiasi quantità di righe / opzioni.

Ogni gruppo / tabella ha un tag img e ogni riga / opzione ha un campo nascosto con l'URL dell'immagine corrispondente.

Al passaggio del mouse su ogni riga, ho bisogno di cambiare l'attributo src dell'immagine di quel gruppo all'URL dell'immagine di quella riga, usando JS o jQuery (qualcosa che funziona in ASP classic).

L'HTML può essere modificato se necessario affinché funzioni.

Grazie.

    <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>

... che assomiglia a qualcosa: