jquery - jQuery幻灯片切换改变图像onclick

Question

我正在使用 .slideToggle 在单击图像时显示/隐藏内容，当内容显示时它会更改一次，但在再次单击以隐藏内容时不会变回原始图像，不太确定我在做什么在这里失踪。非常感谢任何帮助。

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>

Answer 1

你不参考原文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;

    });
});

演示：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;

    });
});

演示：http: //jsfiddle.net/dirtyd77/NCqRk/1/