Question

我正在尝试构建一个基本图库，根据点击的图像显示大图像[div]。缩略图图像存储在基本的无序列表中。

我是一个javascript noob，我可以使用getElementById更改显示类等，但我不希望每个图像都有一个单独的函数，其中它们可能是100左右。

有没有办法调用相同的功能来显示不同的div，具体取决于点击的图像[该图像的较大版本]？

所以：如果单击img1显示divA，如果点击img2显示divB，如果单击img3，则显示divC ...

非常感谢。

Answer 1

传递给onclick方法的事件有一个target参数，该参数指的是被点击的元素。

请发布您的代码，最好是在工作的JsFiddle中，以获得更有针对性的答案。

以下是您想要实现的一般示例：

document.onclick = function(e) {
    // e.target is the img that was clicked, display the corresponding div

    // Get the image number from the id
    var number = e.target.id.substr(3)

    // Display the corresponding div
    document.getElementById('div' + number).style.visibility = 'visible';
}

请注意，最后一行很可能在您的实现中有所不同 - 我不知道您是如何显示这些div的。

Answer 2

你可以尝试如下

在点击我们时，以这种方式为所有图像分配ID 可以用一些逻辑生成相应的div的id 操纵。

如

图像会有像img_divA，img_divB的ID，当它们被点击时，得到id并做一些像substring这样的东西，你会得到divA，divB等等。最后通过javascript显示..

Answer 3

你可以这样做。实际上，每个可点击的dom元素都创建了一个函数，但它们是以编程方式创建的。我使用num属性来显示要显示的图像和要单击的图像之间的对应关系，但还有许多其他（好的）方法可以实现。

// retrieve the divs to be clicked
var toClicks = document.querySelectorAll(".img-to-click");
[].forEach.call(toClicks, function(node){
  // retrieve the target image
  var num = node.getAttribute("num");
  var target = document.querySelector(".img-to-show[num=\"" + num + "\"]");
  // create the click listener on this particular dom element
  // (one of the image to click)
  node.addEventListener('click', function(){
    // hide any currently displayed image
    var current = document.querySelector(".img-to-show.shown");
    if(current) current.classList.remove("shown");
    // set the new current
    target.classList.add("shown");
  });
});

#to-display {
    position: relative;
    width: 100%;
    height: 50px;
}

#to-click {
    position: relative;
    margin-top: 20px;
}

.img-to-show {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}

.img-to-show.shown {
  display: block; 
}

.img-to-click{
    display: inline-block;
    background-color: gray;
    width: 50px;
    color:white;
    text-align: center;
    line-height: 50px;
    vertical-align: middle;
    height: 50px;
    cursor:pointer;
}

<div id="to-display">
    <div class="img-to-show" num="1" style="background-color:blue;"></div>
    <div class="img-to-show" num="2" style="background-color:red;"></div>
</div>

<div id="to-click">
    <div class="img-to-click" num="1">1</div>
    <div class="img-to-click" num="2">2</div>
</div>

画廊。显示与单击的<li>项对应的div。使用Javascript

3 个答案: