0

这是我的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>

查询：

$(".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");
});
4

2 回答 2

1

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

1) 我在您的小提琴中添加了一些 CSS 更改以进行布局，以便更容易在 JSFiddle 中查看结果
2) 您没有指定应该导致切换的事件，所以我通过点击完成了它分区。
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 小提琴 - http://jsfiddle.net/jC8Pf/9/

于 2013-08-07T00:07:50.150 回答
0

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

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

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

于 2013-08-07T00:24:57.890 回答