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/

jQuery幻灯片切换更改图像onclick

1 个答案: