懸停的JS/jQuery更改圖像<tr>

我有一些HTML如下所示，它是以ASP經典形式動態生成的。懸停的JS/jQuery更改圖像<tr>

可以有基團/表（大小/顏色）的具有行/選項的任何量的任何量。

每個組/表有一個img標籤，並且每個行/選項具有與其對應的圖像URL隱藏字段。

在每一行的盤旋，我需要那個組的圖像的src屬性更改到該行的圖像的URL，利用JS或jQuery的（東西在ASP經典的作品）。

如果需要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

來源

2012-09-04 Rivka

我會改變HTML只是一點點減少JavaScript腳本需要通過添加數據屬性的圖片src這樣

http://jsfiddle.net/muDJ9/

and with the使用JavaScript代替你可以爲alt標籤

編輯編輯了擴展：這也運行速度最快的我只是跑在其他測試中使用console.time（）探查

最後提交：http://jsfiddle.net/FV9cw/

來源

2012-09-04 16:24:35

我的表ID和name屬性是動態的，所以我試圖改變jQuery選擇到* $（「表[ID^= '選項'] TR」）。懸停（函數（）{$ （「[ （'img'），「alt」：$（this）.data（'img'）}）; }） ; *但是* $（「[name^='optionVal']」*似乎並沒有這樣做？謝謝。 – Rivka

不知道我是否明白你能否給我一個例子？ –

說我的html看起來像這樣：http： //jsfiddle.net/W6j5R/1/每張圖片的ID開始與「optionImage」 – Rivka

$("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設置爲圖像。

來源

2012-09-04 15:51:59

謝謝，這有效，但選擇器也包含標題行。 – Rivka

'忘記了]'收音機' –

你可以做到這一點作爲下

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(); 
});

來源

2012-09-04 16:15:17 Adil

謝謝。嘗試了你的代碼，但這似乎只適用於表的第一行。 – Rivka

懸停的JS/jQuery更改圖像<tr>

回答

相關問題