尝试使用 php 循环访问 id，然后单击以获取模态弹出窗口

Question

我有多个产品卡正在被php循环。我想在弹出模态的卡片上添加一个onclick。我试过

HTML

<div id="sbf-user-image" class="open-lightbox">

<img id="user-image<?php echo $count ?>" src="DEMO"
onError="this.onerror=null;this.src='DEMO';" alt="test" />

</div>


<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">CLOSE</span>
<img class="modal-content" id="img01" src="DEMO"
onError="this.onerror=null;this.src='DEMO';" alt="test" />

<div id="caption"></div>
</div>

编写脚本

var img = document.getElementById("user-image<?php echo $count ?>");
var modalImg = document.getElementById("img01");
img.onclick = function(){
console.log("testing image loop")
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}

上面的这个脚本不起作用，所以我试着看看它是否会用下面的代码隐藏或做任何事情，它确实做到了。你知道我如何在下面的点击中实现上面的img.onlick吗？

$('.open-lightbox').on('click', function test(){
$(this).find('img').hide();
});

Answer 1

我认为$count有问题，因为我测试了这段代码，虽然我在代码顶部定义了$count，但img.onclick工作正常，控制台日志："testing image loop"。无论如何，如果你想用另一种方式，你可以这样做：

var imageElem = $('.open-lightbox').find('img');
$(imageElem).on('click', function test(){
console.log("testing image loop");
//and the rest of your code
});