替換DOM上的圖像

我正在尋找替換特定圖像，當我點擊它並將其更改爲活動圖像時。但是隨後我點擊任何其他圖像，點擊的圖像變爲活動狀態，而另一個圖像再次變爲非活動狀態。替換DOM上的圖像

的HTML標記看起來是這樣的：

，我使用的HTML是：

<ul id="weeklyPrizeBlockThumb"> 
     <li class="active"> <img src="images/bts/bts_overlay_wp_box_thumbw1.jpg" alt="Week1" id="week1" /> 
     <p class="text"> <span>Gearing Up for School:</span> <span>$100 of Mead® School Supplies!1</span></p> 
     </li> 
     <li> <img src="images/bts/bts_overlay_wp_box_thumbw2.jpg" alt="Week2" id="week2" /> 
     <p class="text"> <span>Sticking to a Schedule:</span> <span>$100 Gift Card from The Container Store®!</span></p> 
     </li> 
     <li> <img src="images/bts/bts_overlay_wp_box_thumbw3.jpg" alt="Week3" id="week3" /> 
     <p class="text"> <span>Doing Lunch:</span> <span>Soft Lunch Bag with $100 of Unilever Products!</span></p> 
     </li> 
    </ul>

的JS是：

var src1 = $('ul#weeklyPrizeBlockThumb li').find('img').attr("src").replace("_active.jpg", ".jpg"); 
    $('ul#weeklyPrizeBlockThumb li').find('img').attr("src", src1); 

    //$('#overlay_wp_weekImg div').find('img').attr("src").replace("_active", ""); 
    var src = $(this).find('img').attr("src").match(/[^\.]+/) + "_active.jpg"; 
$(this).find('img').attr("src", src);

這是不正常工作。它不會停用先前的圖像。

來源

2011-07-21 amit

哪裏是你的點擊事件？ – Ibu

'$（this）'是指什麼？ – Ghostoy

如果在頁面中有兩個圖像相鄰並隱藏一個圖像，在適當的時間顯示另一個圖像，將會更容易，代碼更少。給每個適當的ID，它就像點擊處理程序中的兩行簡單代碼。但是，我同意伊布的觀點，如果沒有看到點擊事件處理程序和它們運行的代碼，我們無法幫助您。 – jfriend00

試試這個〜

$(function(){ 
$("#weeklyPrizeBlockThumb li").each(function(){ 
var li = $(this); 
    li.click(function(){ 
     $("#weeklyPrizeBlockThumb>li>img").each(function(index){ 
      $(this).attr("src","images/bts/bts_overlay_wp_box_thumbw"+ (index + 1) +".jpg"); 
      alert($(this).attr("src")); 
     }) 
     li.find("img").attr("src","images/bts/_active.jpg"); 
     alert(li.find("img").attr("src")); 
    }) 
}) 
})

來源

2011-07-21 05:02:44 Monday

替換DOM上的圖像

回答

相關問題