DOMの画像を置換する

Question

特定の画像をクリックして置き換えてアクティブな画像に変更することを検討しています。他の画像をクリックすると、クリックされた画像はアクティブになり、もう一方の画像は再び非アクティブになります。

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

。以前の画像を非アクティブにしません。

Answer 1

〜

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