Java单击放大图像（无框架）

Question

我是JS和这里的新手。此代码从JSON上传照片，且照片的大小限制。如何增加点击？

function renderUserPhotos(data, container) {
  var content = "";
  for (i = 0; i < data.length; i++) {
    var title = data[i].title ? data[i].title : 'None';
    var url= data[i] ? data[i].url : null;
    var id = data[i].id;
    content += "<li class='photo'><img width='50px' src='" + url + "' /></li>";

Answer 1

您可以将带有纯JS的eventListener添加到任何元素，并在事件函数中操纵CSS元素。

所以类似的事情应该起作用：

var elements = document.querySelectorAll('.photo img');
elements.forEach((element) => {
 element.addEventListener('click', function() {
   element.style.width = '100px';
 });
});

注意，只有在实际渲染图像后才能调用此方法。一种替代方法是，直接在创建过程中添加事件侦听器：

for (i = 0; i < data.length; i++) {
    var title = data[i].title ? data[i].title : 'None';
    var url= data[i] ? data[i].url : null;
    var id = data[i].id;

    // Create <li> element
    var content = document.createElement('li');
    content.classList.add('photo');

    // Create <img> element
    var img = document.createElement('img');
    img.src = url;
    img.style.width = '50px';

    // Register event listener
    element.addEventListener('click', function() {
     element.style.width = '100px';
    })

    // Append the image to the list element
    content.appendChild(img);

    ...
}