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

替换DOM上的图像

1 个答案: