JQuery - 点击一个div内的图像？

Question

So I have a toggled div with an image inside of it that toggles the scrolling of the next div:

<div class="section">
<img src="on.png"> Stuff </div>
<div class="under" style="height:302px;"> Hi </div>

Here's the JQuery for it:

$(".section").click(function(){
    $(this).next('div').slideToggle(1200);
});

How would I make it so on the click function for my div, it toggles the image to "off.png"? And if the src is "off.png", it toggles to "on.png"? Thanks. (Sorry I'm still a noob at JQuery)

Answer 1

$(function(){ 
    $(".section").click(function(){ 
   $("img").attr('src',  
                ($("img").attr('src') == 'http://www3.picturepush.com/photo/a/2772891/64c/png/power-off.png?v0'  
                    ? 'http://kiwianon.com/forums/Themes/Simple_Green/images/on.png'  
                    : 'http://www3.picturepush.com/photo/a/2772891/64c/png/power-off.png?v0' 
                     ) 
                )  
    }); 
}); 

demo

Answer 2

$(".section").click(function(){

    var img = $(this).find("img").eq(0); //add an Id to your img tag so you can refine this selector. 
    if(img.attr("src") == "on.png")
    {
        img.attr("src","off.png");
    }
    else{
        img.attr("src","on.png");
    }

    $(this).next('div').slideToggle(1200);
});

Answer 3

Ken, this is very simple! Just use the code below:

$('.section').click(function(){
var currentimg=$(this).find('img').attr('src');
if(currentimg=="off.png"){
$(this).find('img').attr('src','on.png');
}
else{
$(this).find('img').attr('src','off.png');
}
});

Answer 4

Use $(selector).attr("src", "theImageFilePath") to change the image.

The state could be represented in several ways, including global/module variable, $(selector).data(...), or simply by checking the current value of the "src" attribute.