试图与其他随机图像交换随机图像

Question

我有一些李，每个都有一个图像里面。前三个是可见的，其余的都是隐藏的。我想要做的就是隐藏其中一个可见图像（一个随机的 - 有点作品..），用一个隐藏的图像替换图像并再次显示，但我似乎无法再次看到图像。这里的codepen：http://codepen.io/anon/pen/sBvkC

HTML：

<ul> 
    <li class="imageIn"><img src="http://placehold.it/300x200" /></li> 
    <li class="imageIn"><img src="http://placehold.it/300x200" /></li> 
    <li class="imageIn"><img src="http://placehold.it/300x200" /></li> 
    <li class="imageOut"><img src="http://placehold.it/300x200" /></li> 
    <li class="imageOut"><img src="http://placehold.it/300x200" /></li> 
</ul> 

CSS：

* { margin: 0; padding: 0; }  
ul { list-style-type: none; width: 100%; } 
li { width: 33%; display: inline-block; } 
img { width: 100%; }  
.imageOut { display: none; } 
.hidden { visibility: hidden; }  
.visible { visibility: visible; } 

JS：

window.setInterval(function(){swapImage()},1000); 

function swapImage() { 

    /* select random image that is currently displayed */ 
ins = $('.imageIn > img'); 
var imageDisplayed = $(ins[Math.floor(Math.random()*ins.length)]); 

    /* select random image that is NOT currently displayed */ 
    outs = $('.imageOut > img'); 
    var imageNotDisplayed = $(outs[Math.floor(Math.random()*outs.length)]); 

    /* switch displayed image to visibility:hidden */ 
    $(imageDisplayed).css("visibility", "hidden"); 

    /* SWAP src of imageDisplayed with that of imageNotDisplayed */ 
    var srcDisplayed = $(imageDisplayed).attr("src"); 
    var srcNotDisplayed = $(imageNotDisplayed).attr("src"); 
    $(imageDisplayed).attr("src") = srcNotDisplayed; 
    $(imageNotDisplayed).attr("src") = srcDisplayed; 

    /* switch to visibility:visible */ 
    $(imageDisplayed).css("visibility", "visible"); 

} 

我在做什么错？

Answer 1

您没有正确设置img标签上的src属性。变化：

$(imageDisplayed).attr("src") = srcNotDisplayed; 
$(imageNotDisplayed).attr("src") = srcDisplayed; 

分为：

$(imageDisplayed).attr("src", srcNotDisplayed); 
$(imageNotDisplayed).attr("src", srcDisplayed);