考虑这是html代码:
<table>
<tr>
<td><img id="a11" src="photos/empty.png" /></td>
<td><img id="a12" src="photos/empty.png" /></td>
<td><img id="a13" src="photos/empty.png" /></td>
</tr>
<tr>
<td><img class="move" id="a21" src="photos/Pawn.png" /></td>
<td><img class="move" id="a22" src="photos/Pawn.png" /></td>
<td><img class="move" id="a23" src="photos/Pawn.png" /></td>
</tr>
</table>
将“empty.png”视为空图像
这是jQuery代码:
$(document).ready(function() {
$(".move").click(function (){
//reset the background color of the first row
$("#a11, #a12, #a13" ).css("background-color" , "");
//fetch the src attribute of the clicked element
var src = $(this).attr("src");
//fitch the id attribute of the clicked element
var Id = $(this).attr("id");
var Id = "#"+Id;
var x = Id[2];
var y = Id[3];
////////////////////////
newx = x - 1;
newsy = y;
//form the new id of the above cell
newId = "#a" + newx + newsy;
//make the background of this cell 'red'
$(newId).css("background-color","red");
//fire event that when click on this cell move the image to it and remove the image from original cell
$(newId).click(function(){
$(Id).attr("src","photos/empty.png");
$(this).attr("src",src);
$("#a11, #a12, #a13" ).css("background-color" , "");
});
});
});
必填:
当单击第二行中的任何单元格时,相应的上述单元格的背景将变为红色
然后点击它时图像移动到它。
问题
单击第一个单元格(第一个pawn#a21)
时会出现问题然后单击第二个单元格(第二个pawn#a22)
然后单击第三个单元格(第三个pawn#a23)
然后点击#a13或#a12单元格...相应的下图将移动到它
我不想要它
我想删除上一个事件的效果,但只会执行最后一个事件的效果
答案 0 :(得分:0)
通过比较点击事件中的当前ID,可以做到这一点。
$(newId).click(function(){
var currentid = "#"+this.id;
if(newId == currentid){
$(Id).attr("src","photos/empty.png");
$(this).attr("src",src);
$("#a11, #a12, #a13" ).css("background-color" , "");
}
});
希望它有所帮助。