在表中搜索并计数
这是我网页上的代码的一部分，我创建了一个 5x5 的表格，并将图像传递到该表格。我想要，如果可以碰巧使用搜索功能，每次有人选择一张照片来显示消息时有多少次在同一张桌子上存在这张照片，它将标记它的修订。（边框=“5”）。我遇到问题的功能是这个。
function search(e){
//on that function
//randomNumber = Math.round(Math.random() * 9);
//document.getElementById("anumber").innerHTML = "click on images: " + randomNumber;
//I am not sure if Is this the way to do it.
}
<body onload="loadImages()">
<table border="1" style="width: 100%" id="myT" onclick="search(event)">
<tbody><tr>
<td><img src="./my_files/k5.jpg"></td>
<td><img src="./my_files/k2.jpg"></td>
<td><img src="./my_files/k2.jpg"></td>
<td><img src="./my_files/k4.jpg"></td>
<td><img src="./my_files/k2.jpg"></td>
</tr>
<tr>
<td><img src="./my_files/k3.jpg"></td>
<td><img src="./my_files/k3.jpg"></td>
<td><img src="./my_files/k4.jpg"></td>
<td><img src="./my_files/k4.jpg"></td>
<td><img src="./my_files/k1.jpg"></td>
</tr>
<tr>
<td><img src="./my_files/k4.jpg"></td>
<td><img src="./my_files/k2.jpg"></td>
<td><img src="./my_files/k2.jpg"></td>
<td><img src="./my_files/k4.jpg"></td>
<td><img src="./my_files/k2.jpg"></td>
</tr>
<tr>
<td><img src="./my_files/k1.jpg"></td>
<td><img src="./my_files/k5.jpg"></td>
<td><img src="./my_files/k5.jpg"></td>
<td><img src="./my_files/k3.jpg"></td>
<td><img src="./my_files/k2.jpg"></td>
</tr>
<tr>
<td><img src="./my_files/k5.jpg"></td>
<td><img src="./my_files/k3.jpg"></td>
<td><img src="./my_files/k5.jpg"></td>
<td><img src="./my_files/k5.jpg"></td>
<td><img src="./my_files/k5.jpg"></td>
</tr>
</tbody></table>
浮云间1回答
-
慕运维8079593
首先，您必须onclick="search()"从表格移动到每个表格img，这是因为您必须处理被单击的图像，而不是整个表格。您必须以某种方式将单击的图像与其他图像进行比较，对吧？因此，我搜索了所有img标签，然后for loop添加了具有搜索功能的单击事件侦听器。现在，当您单击图像时，您可以捕获该图像的 src。这将是与其他图像进行比较的关键，因为它对于每个图像来说都是唯一的值。现在，当我们单击图像的 src 时，我们可以将其与其他图像进行比较。当它们相等时，我们可以为该图像添加边框。一切都在下面的代码片段中进行了解释:)//Find all imageslet allImages = document.querySelectorAll('img');//Paragraph where we will display how many times we have same imagelet result = document.getElementById('count');//Add event listener to every imagefor(let i=0;i<allImages.length;i++){ allImages[i].addEventListener('click',search);}//Search functionfunction search(e){ //Get clicked img src let clickedImgSrc = e.target.src; //Get rid of things we don't need. We will use only directory/imagename.jpg for comparing let clickedImgDirectory =clickedImgSrc.indexOf('my_files/'); let clickedImgName = clickedImgSrc.substr(clickedImgDirectory); //Initialize counter let count = 0; //Loop thru all images, get src of looped image, get rid of things we don't need for(let i=0;i<allImages.length;i++){ let imgSrc = allImages[i].src; let imgDirectory = imgSrc.indexOf('my_files/'); let imgName = imgSrc.substr(imgDirectory); //Compare looped img with clicked img, if they're equal increase count by 1 and add border to that image. if(imgName === clickedImgName){ count++; allImages[i].style.border = '5px solid red'; }else{ allImages[i].style.border = 'none'; } } //Write count value to paragraph return result.innerText = 'This photo exists '+count+' times.';}<p id="count"></p> <table style="width: 100%" id="myT"> <tbody> <tr> <td><img src="./my_files/k5.jpg"></td> <td><img src="./my_files/k2.jpg"></td> <td><img src="./my_files/k2.jpg"></td> <td><img src="./my_files/k4.jpg"></td> <td><img src="./my_files/k2.jpg"></td> </tr> <tr> <td><img src="./my_files/k3.jpg"></td> <td><img src="./my_files/k3.jpg"></td> <td><img src="./my_files/k4.jpg"></td> <td><img src="./my_files/k4.jpg"></td> <td><img src="./my_files/k1.jpg"></td> </tr> <tr> <td><img src="./my_files/k4.jpg"></td> <td><img src="./my_files/k2.jpg"></td> <td><img src="./my_files/k2.jpg"></td> <td><img src="./my_files/k4.jpg"></td> <td><img src="./my_files/k2.jpg"></td> </tr> <tr> <td><img src="./my_files/k1.jpg"></td> <td><img src="./my_files/k5.jpg"></td> <td><img src="./my_files/k5.jpg"></td> <td><img src="./my_files/k3.jpg"></td> <td><img src="./my_files/k2.jpg"></td> </tr> <tr> <td><img src="./my_files/k5.jpg"></td> <td><img src="./my_files/k3.jpg"></td> <td><img src="./my_files/k5.jpg"></td> <td><img src="./my_files/k5.jpg"></td> <td><img src="./my_files/k5.jpg"></td> </tr> </tbody> </table>
随时随地看视频慕课网APP
相关分类
JavaScript