Question

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

我正在努力建立一个现有的小提琴......但这里是 ~~my updated one~~ my updated one。

-Edit-感谢大家的帮助，但我遗漏了当你点击它以显示消息时我仍然希望盒子向下移动。（我已经更新了上面的小提琴 - 链接 - 这样它更简单，更简洁。）我的问题是用户不知道他们点击了哪个盒子（因为数字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>

我想要什么 - 一旦你点击一个图像，我希望它变成洋红色（这里是洋红色的源图像btw：http://placehold.it/50x50/ff00ff）。 ....然后，当你点击另一个框或再次点击它时，它必须恢复原始图像。

希望这是有道理的。感谢大家提供任何帮助......或者至少，享受小提琴。

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

我的小提琴基于this one。

Answer 1

以下是您的问题的更新小提琴

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

Answer 2

为您提供干净整洁的解决方案。您可以将$images更改为您想要的任何选择器，并将image变量更改为您想要的任何图像：）

http://jsfiddle.net/EU6VW/1/

var $images = $('#SPIRIT').find('img'),
    image = { on: 'http://placehold.it/140x140/ff00ff', off: 'http://placehold.it/140x140' };

$images.on('click', function() {
    $(this).attr('src', image.on === $(this).attr('src') ? image.off : image.on );
    $images.not(this).attr('src', image.off);
});

您也可以通过将其更改为以下代码来稍微优化一下 - 这只会将事件监听器附加一次（到div#spirit），而不是每img个标记附加一次。

var $container = $('#SPIRIT'),
    $images = $container.find('img'),
    image = { on: 'http://placehold.it/140x140/ff00ff', off: 'http://placehold.it/140x140' };

$container.on('click', 'img', function() {
    $(this).attr('src', image.on === $(this).attr('src') ? image.off : image.on );
    $images.not(this).attr('src', image.off);
});

如果您希望在优化方面变得愚蠢，那么每个主要浏览器都支持image.src DOM属性，因此您可以删除一些jQuery开销膨胀;

var $container = $('#SPIRIT'),
    $images = $container.find('img'),
    image = { on: 'http://placehold.it/140x140/ff00ff', off: 'http://placehold.it/140x140' };

$container.on('click', 'img', function() {
    this.src = image.on === this.src ? image.off : image.on;
    $images.not(this).attr('src', image.off);
});

如何在点击时切换图像？

2 个答案: