javascript - 如何定位由 JavaScript 中的 for 循环放置的图像？

Question

我已经创建了一个完全使用 JavaScript 的表。

该表由 3 列组成，其中一列仅包含每行中的图像。我试图让它在用户单击列中的一个图像时在两个图像之间切换。

如果只是分配给变量的一个图像，我会知道如何执行此操作，但是由于这些图像是由 for 循环放置到表中的，因此似乎没有任何简单的方法可以定位它们。

我该怎么做呢？我听说要使用 onClick 功能，我先尝试过，但没有成功。这是我的代码的样子：

var books=[
    {title:'Six Easy Pieces: Essentials of Physics By Its Most Brillant Teacher',
    author:' Richard P. Feynman',
    alreadyRead:false
    },
    {title:'Astrophysics for People In A Hurry',
    author:'Neil deGrasse Tyson',
    alreadyRead:true
    },
    {title:'Pet Semtary',
    author:'Stephan King',
    alreadyRead:true
    },
    {title:'The Poisonwood Bible',
    author:'Barbara Kingsolver',
    alreadyRead:true
    },
    {title:'The Name Of The Wind',
    author:'Patrick Rothfuss',
    alreadyRead:true
    }
    ];
    
    //creating table
    var bookTable = document.createElement('table');
      bookTable.style.width = '75%';
      bookTable.setAttribute('border', '3px');
    //creating head of table
      var thead = document.createElement('thead');
      var htr1 = document.createElement('tr');
        
            var htd = document.createElement('td');     
            var htd2 = document.createElement('td');
            var htd3 = document.createElement('td');
            htd.appendChild(document.createTextNode('Title'));
            htd2.appendChild(document.createTextNode('Author'));
            htd3.appendChild(document.createTextNode('Read?'));
    
            htr1.appendChild(htd)
            htr1.appendChild(htd2)
            htr1.appendChild(htd3)
    
        thead.appendChild(htr1);
            bookTable.appendChild(thead);
    
    //creating body
      var tbdy = document.createElement('tbody');
      for (var i = 0; i < books.length; i++) {
        var tr = document.createElement('tr');
        
            var td = document.createElement('td');     
            var td2 = document.createElement('td');
            var td3 = document.createElement('td');
    
            td.appendChild(document.createTextNode(books[i].title ));
            td2.appendChild(document.createTextNode(books[i].author ));
    //adding images for read and not read
            if(books[i].alreadyRead){
                var image= document.createElement('img');
                image.src="images/check.png";
                image.style.width="50px";
                image.style.height="50px";

                image.addEventListener("click", function (event)
                {
                  var selectedImage = event.target;

                  if (selectedImage.src == "images/check.png")
                  {
                    selectedImage.src = "images/xmark.jpg";
                  }
                  else if (selectedImage.src == "images/xmark.jpg")
                  {
                    selectedImage.src = "images/check.png";
                  }
                });
              
                td3.appendChild(image);
            }
            else{
                var image= document.createElement('img');
                image.src="images/xmark.jpg";
                image.style.width="50px";
                image.style.height="50px";

                image.addEventListener("click", function (event)
                {
                  var selectedImage = event.target;

                  if (selectedImage.src == "images/check.png")
                  {
                    selectedImage.src = "images/xmark.jpg";
                  }
                  else if (selectedImage.src == "images/xmark.jpg")
                  {
                    selectedImage.src = "images/check.png";
                  }
                  });
              
                td3.appendChild(image);
    
            }
    
    
    
            tr.appendChild(td)
            tr.appendChild(td2)
            tr.appendChild(td3)
    
        
        tbdy.appendChild(tr);
      }
      bookTable.appendChild(tbdy);
      document.body.appendChild(bookTable)
    
    //changing styles
      document.head.innerHTML += `
      <style>
        thead {
          background-color: grey; 
          font-weight: bold;
          text-align: center;
    
        }    
      </style>`;

标签： javascripthtmlcssimage

Answer 1

事件监听器正在输入就好了。

问题是您返回的 src 是一个完整的 URL，而不仅仅是您放入 src 中的那个位。

您需要测试您放入 src 中的元素是否确实在该完整图像地址内。

一种快速（如果有点脏）的方法是使用 indexOf - 例如

(selectedImage.src.indexOf('images/check.png') != -1)

因此，您的代码保持原样，除了测试以查看要更改图像的内容被上述替换并等效于其他图像：

<script>
var books=[
    {title:'Six Easy Pieces: Essentials of Physics By Its Most Brillant Teacher',
    author:' Richard P. Feynman',
    alreadyRead:false
    },
    {title:'Astrophysics for People In A Hurry',
    author:'Neil deGrasse Tyson',
    alreadyRead:true
    },
    {title:'Pet Semtary',
    author:'Stephan King',
    alreadyRead:true
    },
    {title:'The Poisonwood Bible',
    author:'Barbara Kingsolver',
    alreadyRead:true
    },
    {title:'The Name Of The Wind',
    author:'Patrick Rothfuss',
    alreadyRead:true
    }
    ];
    
    //creating table
    var bookTable = document.createElement('table');
      bookTable.style.width = '75%';
      bookTable.setAttribute('border', '3px');
    //creating head of table
      var thead = document.createElement('thead');
      var htr1 = document.createElement('tr');
        
            var htd = document.createElement('td');     
            var htd2 = document.createElement('td');
            var htd3 = document.createElement('td');
            htd.appendChild(document.createTextNode('Title'));
            htd2.appendChild(document.createTextNode('Author'));
            htd3.appendChild(document.createTextNode('Read?'));
    
            htr1.appendChild(htd)
            htr1.appendChild(htd2)
            htr1.appendChild(htd3)
    
        thead.appendChild(htr1);
            bookTable.appendChild(thead);
    
    //creating body
      var tbdy = document.createElement('tbody');
      for (var i = 0; i < books.length; i++) {
        var tr = document.createElement('tr');
        
            var td = document.createElement('td');     
            var td2 = document.createElement('td');
            var td3 = document.createElement('td');
    
            td.appendChild(document.createTextNode(books[i].title ));
            td2.appendChild(document.createTextNode(books[i].author ));
    //adding images for read and not read
            if(books[i].alreadyRead){
                var image= document.createElement('img');
                image.src="images/check.png";
                image.style.width="50px";
                image.style.height="50px";

                image.addEventListener("click", function (event)
                {
                  var selectedImage = event.target;alert(selectedImage.src);

                  if (selectedImage.src.indexOf('images/check.png') != -1)
                  {alert();
                    selectedImage.src = "images/xmark.jpg";
                  }
                  else if (selectedImage.src.indexOf("images/xmark.jpg") != -1)
                  {
                    selectedImage.src = "images/check.png";
                  }
                });
              
                td3.appendChild(image);
            }
            else{
                var image= document.createElement('img');
                image.src="images/xmark.jpg";
                image.style.width="50px";
                image.style.height="50px";

                image.addEventListener("click", function (event)
                {
                  var selectedImage = event.target;

                  if (selectedImage.src == "images/check.png")
                  {
                    selectedImage.src = "images/xmark.jpg";
                  }
                  else if (selectedImage.src == "images/xmark.jpg")
                  {
                    selectedImage.src = "images/check.png";
                  }
                  });
              
                td3.appendChild(image);
    
            }
    
    
    
            tr.appendChild(td)
            tr.appendChild(td2)
            tr.appendChild(td3)
    
        
        tbdy.appendChild(tr);
      }
      bookTable.appendChild(tbdy);
      document.body.appendChild(bookTable)
    
    //changing styles
      document.head.innerHTML += `
      <style>
        thead {
          background-color: grey; 
          font-weight: bold;
          text-align: center;
    
        }    
      </style>`;
      </script>