Question

道歉，如果我的问题对JS专家来说听起来微不足道。我已经创建了一个图像滑块（轮播），并且在加载缩略图时，我正在尝试创建对全尺寸图像的引用，这样当单击缩略图时 - 图像将在另一个div中打开。

window.onload处理程序中的相关代码是：

for (var i = 0; i < numImages; ++i) {
    var image = images[i],
        frame = document.createElement('div');
    frame.className = 'pictureFrame';
    /* some styling skipped */
    carousel.insertBefore(frame, image);
    frame.appendChild(image);

  } /* for */

我的第一次尝试是在for循环结束时添加“onclick”：

frame.onclick= function ()  { 
        var largeImage = document.getElementById('largeImage');
   largeImage.style.display = 'block';
   largeImage.style.width=200+"px";
   largeImage.style.height=200+"px";
   var url=largeImage.getAttribute('src'); 

   document.getElementById('slides').style.display = 'block';
    document.getElementById("slides").innerHTML="<img src='url' />"; 

    }

但是，这可能仅适用于硬编码的ID（例如'largeImage'）。理想情况下，我需要将image.src作为参数传递，但此(frame.onclick= function (image.src))将不起作用。我的下一个想法是将获取image.src的所有逻辑放到一个单独的函数中并用frame.onclick= myFunction;显示它但是，我来了一个例子：

<input type="button" value="Click me" id="elem">
<script>
  elem.onclick = function(event) {
    // show event type, element and coordinates of the click
    alert(event.type + " at " + event.currentTarget);
    alert("Coordinates: " + event.clientX + ":" + event.clientY);
  };
</script>

在这里我理解为什么在这个例子中处理程序可以接受参数。

将图像分配给onclick事件的正确方法是什么？或者是否有更好的方法将缩略图变成href？

Answer 1

虽然它可能不是最佳方式，但您可以将完整尺寸的图像路径作为缩略图的数据属性。

return (
  <MyApp style={{paddingTop:35}}/>
)

然后在你的onclick上，你可以访问thumbnail元素并获取它的数据属性。

<img id="thumbnail" src="thumbnailpath" data-fullSizeImage="fullSizePath">

代码未经测试;但是，这样的事情应该基于我的经验。

数据属性是一个非常灵活的自定义属性供开发人员使用。基本上，您从“data-”开始，然后附加一个名称来表示该属性。这是documententation link。

Answer 2

您可以创建一个closure（即一个匿名函数）并将其注册为事件处理程序，以便从事件处理程序本身内部的事件处理程序外部访问变量：

for (var i = 0; i < numImages; ++i) {
    /* create element */
    element.addEventListener('click', function (event) {
        console.log('The index is ' + i);
    });
}

然而，这不会很有效，因为变量i每次循环增加时都会更改，并且闭包不会“捕获”当前值，只会引用本身，所以最后i对于每个事件监听器都等于numImages。

如果您使用的是ES6，则可以通过using let (or const)克服此问题以防止此行为：

for (let i = 0; i < numImages; ++i) {
    /* create element */
    element.addEventListener('click', function (event) {
        console.log('The index is ' + i);
    });
}

如果使用ES6不是一个选项，你仍然可以在ES5及更早版本中完成此操作，方法是将循环内部包装在一个以i为参数的函数中，这样可以确保每个事件处理程序引用不同的变量，因为这些参数是每次迭代的不同变量：

for (var i = 0; i < numImages; ++i) {
    (function (index) {
        /* create element */
        element.addEventListener('click', function (event) {
            console.log('The index is ' + index);
        });
     })(i); /* pass in i here, which will be assigned to the index parameter */
}

Javascript - 将变量传递给事件处理程序

2 个答案: