我正在为我的一个朋友做一个小项目。它生成一个图像网格，然后当您单击其中一个图像时，它应该更改为另一个图像，该图像的 src 存储在变量中。出于某种原因，.click 处理程序不仅适用于网格。
这是 HTML：
<body class="holder">
<div class="row">
<img class="template tileSelect" src="resources/grassTexture.jpg">
</div>
</body>
这是javascript：
$(".tileSelect").click(function(){
alert("tile clicked")
// Change src attribute of image
$(this).attr("src", currentlySelected);
console.log("image changed");
return false;
});
以下是完整的JS文件，供参考网格的制作方式：
$( "#builder" ).click(function() {
var rows = $("#rowNum").val();
var columns = $("#colNum").val();
console.log(rows);
console.log(columns);
$( ".worldmaker" ).addClass( "hide" );
$( ".topElements" ).removeClass( "hide" );
//populate the world
for(i = 0; i < rows; i++){
//populate the row
var x = $(".template").clone();
x.addClass("tile");
x.removeClass("template");
$(".row").append($(x))
console.log("inserting");
}
//grab the row and clone it. create a template
x = $(".row").clone();
x.addClass("template2");
//insert the template into the document
$(".holder").append($(x));
for(i=0;i<columns - 1;i++){
//populate the columns
//grab the template
x = $(".template2").clone();
//add the row class
//remove the template class
x.removeClass("template2");
//insert it
$(".holder").append($(x))
console.log("inserting column "+ x);
}
return false;
});
var showlines = 1;
$( "#gridlines" ).click(function() {
if(showlines == 1){
$('.tile').css('border',"0px solid #021a40");
showlines = 0;
}else{
$('.tile').css('border',"1px solid #021a40");
showlines = 1;
}
return false;
});
/*
*/
var currentlySelected = "/resources/treeTexture.png";
$(".element" ).click(function() {
console.log(jQuery(this).children("img"));
return false;
});
$(".tileSelect").click(function(){
alert("tile clicked")
// Change src attribute of image
$(this).attr("src", currentlySelected);
console.log("image changed");
return false;
});
我将不胜感激任何帮助，以弄清楚为什么选择磁贴时甚至不会显示警报。js 中的其他一切似乎都在工作。
试试下面的代码...它应该适合你
$("img.tileSelect").on('click', function(){
alert("tile clicked")
// Change src attribute of image
$(this).attr("src", currentlySelected);
console.log("image changed");
return false;
});