jquery - 如何在点击时切换图像？

Question

如何使用 jquery 在点击时切换图像？

我正在尝试建立在现有的 fiddle 上...但这里是 my updated one my updated one .

-编辑- 非常感谢大家的帮助，但我遗漏了当您单击它以显示消息时我仍然希望这些框向下移动。 (我已经更新了 fiddle - 上面的链接 - 所以它更简单，更简洁。)我的问题是用户不知道他们点击了哪个框(因为数字 1,2,3..不会在那里帮助他们。

到目前为止的代码:

    <script type="text/javascript">
//rough multi slide. will shake elements below dropdowns
var prev = null;
function toggleDiv(e) {
  var divToToggle = $( $(this).find("a").attr('href') );
  if (prev && (!prev.is($(this)))) { //switch
    var prevDiv = $( prev.find("a").attr('href') );
    var divs = divToToggle.add(prevDiv); //add prevDiv into collection
    divs.slideToggle("slow"); //slideToggle all in collection
    prev = $(this);
  } else { //show/hide
    prev = divToToggle[0].style.display == 'block' ? null : $(this);
    divToToggle.slideToggle("slow");
  }
  return false;
//  e.preventDefault();
}

$('#document').ready(function() {
  $(".press").click(toggleDiv);
});
</script>

我想要什么-单击图像后，我希望它变成洋红色(顺便说一句，这里是洋红色的源图像:http://placehold.it/50x50/ff00ff)。....然后一旦您点击另一个框或再次点击它，它必须恢复为原始图像。

希望这是有道理的。非常感谢您的帮助……或者至少，享受 fiddle 吧。

我已经试过了，但它不起作用..但这正是我所需要的: http://www.designchemical.com/blog/index.php/jquery/jquery-image-swap-using-click/

我的 fiddle 基于 this one .

Answer 1

这是您的问题的更新 fiddle

http://jsfiddle.net/7Yveu/1/

//rough multi slide. will shake elements below dropdowns
var prev = null;
function toggleDiv(e) {
 var currentImg = $(e.currentTarget).find("img");
        $(".press img").attr("src", "http://placehold.it/140x140");
        currentImg.attr("src", "http://placehold.it/140x140/ff00ff");
}

$('#document').ready(function() {
  $(".press").click(toggleDiv);
});