Question

i am looking to replace a particular image when i click on it and change it to active image. but then i click on any other image, the clicked image becomes active and the other image becomes inactive again.

the html markup looks like this:

the HTML that i am using is:

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

The JS is:

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

this is not working correctly. it does not de-active-ate the previous images.

Answer 1

try this~

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