我目前有一个可用的图像交换代码。但我不想图像交换所有图像。如果希望只能相互交换橙色图像。如果橙色图像与蓝色或红色图像交换,使橙色与红色或蓝色相同而不影响红色或蓝色图像。这是一个示例JsFiddle
需要处理的代码
var pix = document.getElementById("GALLERY").getElementsByTagName("img");
for ( var p = 0; p < pix.length; ++p )
{
pix[p].onclick = picclick;
}
var firstImage = null;
function picclick( )
{
// to cancel a swap, click on first image again:
if ( firstImage == this )
{
this.className = "normal";
firstImage = null;
return;
}
// is this first image clicked on?
if ( firstImage == null )
{
// yes
firstImage = this;
this.className = "highlighted";
document.getElementById('search').value = "";
return; // nothing more to do
}
// aha! second image clicked on, so do swap
firstImage.className = "normal";
var temp = this.src;
this.src = firstImage.src;
firstImage.src = temp;
firstImage = null;
};
P.S。红色和蓝色也不能相互交换。
到目前为止我尝试过:
我一直在尝试1st_image_clicked=sold.png
然后2nd_image_clicked=sold.png
或1st_image_clicked=0-1.png
和2nd_image_clicked=sold.png
然后1st_imagec_licked & 2nd_image_clicked=sold.png
答案 0 :(得分:0)
如果我理解正确,这就是你要找的东西:
function picclick() {
// to cancel a swap, click on first image again:
if (firstImage == this) {
this.className = "normal";
firstImage = null;
return;
}
// is this first image clicked on?
if (firstImage == null) {
// yes
firstImage = this;
this.className = "highlighted";
//document.getElementById('search').value = "";
return; // nothing more to do
}
// aha! second image clicked on, so do swap
firstImage.className = "normal";
//check if its not blue and red
if (!(firstImage.alt == 'sold' && this.alt == 'payed') && !(firstImage.alt == 'payed' && this.alt == 'sold')) {
if (firstImage.alt == 'sold' || firstImage.alt == 'payed') {
//if first is blue or red, change second
this.src = firstImage.src;
this.alt = firstImage.alt;
} else if (this.alt == 'sold' || this.alt == 'payed') {
//if second is blue or red, change first
firstImage.src = this.src;
firstImage.alt = this.alt;
} else {
//do swap
var temp = this.src;
var temp2 = this.alt;
this.src = firstImage.src;
this.alt = firstImage.alt;
firstImage.src = temp;
firstImage.alt = temp2;
}
}
firstImage = null;
};
<强> Working demo 强>