JQuery - 点击时在div内切换图像？

Question

我有一个带图片的切换div，通过它可以切换下一个div的滚动：

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

这里是相关的 JQuery 代码：

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

我该如何在我的div的click函数中让它切换图片到"off.png"？如果当前src是"off.png"，那么它会切换到"on.png"吗？谢谢。（对不起，我还是JQuery的新手）

- user569322

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

演示

- genesis

---

我很好奇，虽然这可能并不重要，但我倾向于在直接访问的事物上放置ID。使用id方式与使用您示例中的短DOM遍历方式相比，有什么优缺点吗？（如果我按照您的方式进行操作，我会将$(this).closest("img")保存在本地变量中，以避免重复执行--或者jQuery是否会缓存它？） - Dave Newton

@Ken：在演示中多试几次，只需更改URL即可。 - genesis

你又回答了我的问题！:O 我爱你。 - user569322

@DaveNewton：我已经编辑了我的代码，closest()没有起作用。但是，确实最好只调用一次并使用变量处理。 - genesis

好的。+1 感谢查找开关图片 ;) - Dave Newton

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

- BZink

Answer 3

Ken，这很简单！只需使用以下代码：

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

- Kevin Pei

Answer 4

使用 $(selector).attr("src", "theImageFilePath") 来改变图片。

状态可以用多种方式表示，包括全局/模块变量、$(selector).data(...) 或者简单地检查 "src" 属性的当前值。

- Dave Newton