修复imageswap onclick功能

时间:2013-07-20 07:10:53

标签: javascript

我目前有一个可用的图像交换代码。但我不想图像交换所有图像。如果希望只能相互交换橙色图像。如果橙色图像与蓝色或红色图像交换,使橙色与红色或蓝色相同而不影响红色或蓝色图像。这是一个示例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.png1st_image_clicked=0-1.png2nd_image_clicked=sold.png然后1st_imagec_licked & 2nd_image_clicked=sold.png

1 个答案:

答案 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