JQuery - 当其中一个被切换时，制作一个 img 切换列表转到它们的默认图像答案

【问题标题】：JQuery - making a list of img toggles go to their default image when one of them is toggledJQuery - 当其中一个被切换时，制作一个 img 切换列表转到它们的默认图像
【发布时间】：2013-08-06 23:37:54
【问题描述】：

这是我的jsFiddle。

有两个 div 和四个 imgs。我希望第一个 div 在两个 imgs 之间切换，第二个 div 在两个 imgs 之间切换。我还希望另一个 div 在切换另一个 div 时默认为第一个 img。

HTML：

<div class="home">
    <img src="http://www.misfitpsycles.com/blog/wp-content/uploads/2011/09/Red-Circle.jpg">
    <img style="display:none;" src="http://tribute.dbclay.com/img/badjorx/black-circle.jpg">
</div>
<div class="myPlayer">
    <img src="http://upload.wikimedia.org/wikipedia/commons/d/d5/Blue_Circle_o.jpg">
    <img style="display:none;" src="http://i00.i.aliimg.com/img/pb/301/829/308/308829301_525.jpg">
</div>

JQuery:

$(".home img").toggle(function () {
    $(this).attr('img', "http://api.ning.com/files/fKlV2*stZybazIWAVKY3Mp3ceSTbNHhqgbBTXhdqDPoZ4SnroGQhXGtxNNpDGexaWmh3mmlm*IA3BlneAW5eYAGsPy--S5Vv/Black_circle8cf6f.jpg");
}, function () {
    $(this).attr('img', "http://wolfelawmiami.com/wp-content/uploads/2013/01/RED-CIRCLE-3.jpg");
});

$(".myPlayer img").toggle(function () {
    $(this).attr('img', "http://upload.wikimedia.org/wikipedia/commons/d/d5/Blue_Circle_o.jpg");
}, function () {
    $(this).attr('img', "http://i00.i.aliimg.com/img/pb/301/829/308/308829301_525.jpg");
});

【问题讨论】：

什么事件应该导致切换发生？是点击还是悬停？
点击会来回翻转图像。我还没有添加 css，但是 div 中的 imgs 会相互重叠，点击后会隐藏另一个。
我可以让切换开关正常工作。切换另一个 div 时，我无法让另一个 div 自动默认为原始 img。

标签： jquery image list toggle

【解决方案1】：

好的，我看了一下您的 JSFiddle。我没有修改你的，而是按照我通常会考虑的方式来处理它：

1) 我在您的小提琴中添加了一些 CSS 更改以进行布局，以便更容易在 JSFiddle 中查看结果
2) 你没有指定什么事件应该导致切换，所以我是通过点击 div 来完成的。
3）您已经在页面中加载图像，因此更改 src 是一种奇怪的方法 IMO，您不妨更改两个图像的可见性。

这是一个 JS fiddle 演示，展示了我如何使用单击功能和使用类来识别和更改图像。

$('div').click(function(){
    $(this).find('img:hidden').addClass('tofadein');
    $(this).find('img:visible').addClass('tofadeout');
    $(this).find('img.tofadein').fadeIn();
    $(this).find('img.tofadeout').fadeOut();
    $(this).find('img').removeClass();  

      $(this).siblings('div').find('img').eq(0).fadeIn();
    $(this).siblings('div').find('img').eq(1).fadeOut();
});

JS Fiddle - http://jsfiddle.net/jC8Pf/9/

【讨论】：

谢谢！！那好多了。我从 stackoverflow 得到了 src 方法。
很高兴听到，如果这回答了您的问题，那么请记住将此答案标记为正确。否则，如果您需要对答案进行澄清，请告诉我。
James，我现在正在尝试两个以上的 div。你能看看我的更新吗？ jsfiddle.net/jC8Pf/11

【解决方案2】：

这是一个非常简单的方法。我不明白你想从第二个请求中得到什么。你能具体说明吗？ “我还希望另一个 div 在切换另一个 div 时默认为第一个 img。”

$('div').on('click', 'img', function(){
    var c = $(this).closest('div').attr('class');
   $('.'+ c + ' img').toggle();
});

这里是小提琴： http://jsfiddle.net/alutz33/7eDSN/

【讨论】：

我的意思是，当第二个 div 被切换时，第一个 div 会默认恢复为原始 img。因此，在您的示例中，如果您将红色切换为黑色空圆圈，然后将蓝色圆圈切换为绿色圆圈，那么黑色空圆圈将自动切换回红色。希望有帮助。参见詹姆斯的例子。有用。我让切换开关像您的示例一样工作，但无法让第一个 div 自动切换回红色圆圈。