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

这工作不正常。它不会停用以前的图像

试试这个~

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

---

如果在页面中有两个相邻的图像，并且只隐藏一个，在适当的时间显示另一个，那么会更容易，代码也会少很多。给每个人一个合适的ID，就像单击处理程序中的两行简单代码一样。但是，我同意Ibu的观点，如果不查看单击事件处理程序及其运行的代码，我们将无法帮助您。

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