jQuery滑动切换更改图像onclick

我使用.slideToggle显示/隐藏内容，当图像被点击时，它会在内容显示时更改一次，但当它再次点击以隐藏时则不会更改回原始图像内容，不太清楚我在这里错过了什么。任何帮助非常感谢。jQuery滑动切换更改图像onclick

jQuery的：

$(document).ready(function() { 

    $('#toggle1').click(function() { 
     $('.toggle1').slideToggle('1100'); 
     $("#bg").attr('src',"images/box-arrow-down.jpg"); 
     return false; 

    });

的HTML：

<div class="box"> 
    <div style="width:1100px;height:100px;margin-left:40px;"> 
    <span style="float:left;"><a href="#" id="toggle1"><img src="images/box-arrow-up.jpg" height="16" width="17" alt="arrow" id="bg" style="margin-top:40px;" /></a></span> 
    </div> 
    <div class="toggle1" style="display:none;width:1100px;padding:0px;margin-left:8px;"> 
    <div class="boxTime">09:00</div> 
    </div> 
</div>

来源

2013-04-10 Mark

你不引用原始src。你可以通过几百种不同的方式来解决这个问题......但这里有几个例子。

你可以做这样的事情：

$(document).ready(function() { 
    $('#toggle1').click(function() { 
     $('.toggle1').slideToggle('1100'); 
     var src = $("#bg").attr('src') == "images/box-arrow-down.jpg" ? "images/box-arrow-up.jpg" : "images/box-arrow-down.jpg"; 
     $("#bg").attr('src', src); 
     return false; 

    }); 
});

DEMO： http://jsfiddle.net/dirtyd77/NCqRk/

或者是这样的：

$(document).ready(function() { 
    var originalImage = $("#bg").attr('src'); 

    $('#toggle1').click(function() { 
     $('.toggle1').slideToggle('1100'); 
     var src = $("#bg").attr('src') == originalImage ? "images/box-arrow-down.jpg" : originalImage; 
     $("#bg").attr('src', src); 
     return false; 

    }); 
});

DEMO： http://jsfiddle.net/dirtyd77/NCqRk/1/

来源

2013-04-10 21:58:11 Dom

感谢，那是很大的，它现在是有道理的。我实际上遇到了另一个问题，我想用同一个函数独立地切换多个div，我该如何实现？ – Mark 2013-04-11 09:45:03

你能提供一个[jsfiddle例子]（http://jsfiddle.net）吗？ – Dom 2013-04-11 16:14:01

我尝试使用类而不是ID，但无法让它工作。这个例子对每个具有不同ID的div块使用一个函数，似乎不是一个非常有效的方法，http://jsfiddle.net/TyjRv/3/ – Mark 2013-04-11 21:51:58

jQuery滑动切换更改图像onclick

回答

相关问题