当页面加载时,点击第一次不工作,但后来工作正常,它在没有 onClick() 的 vs 代码中运行完美,但在 Visual Studio 没有 onClick() 时它不会运行,它像这样运行..请有人指导我解决这个问题谢谢..
<script>
function GetProductsRowHtmlSlider(product, div) {
$(div).append($('<div class="column"><div class="container" style="width: 320px; margin-bottom: 10px;"><div class="pic_container"><img src=' + product.imgSrc + ' data-highres=' + product.imgSrc + ' class="image" style="width: 100%; height: auto; padding: 20px;"></div><h3 class="productName" style="padding: 0px !important; margin: 0px !important; overflow-wrap: break-word;">' + product.Title + '</h3><p class="productDisc" style="padding: 0px !important; margin: 0px !important; overflow-wrap: break-word;">' + product.ItemPrice + '</p></div><div id = "myModal" class="modal"><span id="close_model" class="close">×</span><img class="modal-content" id="modal-image"></div></div>'))
}
</script>
function myFunction() {
var images = document.querySelectorAll(".image");
var len = images.length;
for (var i = 0; i < len; i++) {
images[i].addEventListener("click", openModal);
}
var modal = document.getElementById("myModal");
var modalImg = document.getElementById("modal-image");
function openModal() {
modal.style.display = "block";
modalImg.src = this.getAttribute("data-highres");
}
var span2 = document.getElementById("close_model");
span2.onclick = function () {
modal.style.display = "none";
};
window.openModal = function (images) {
modal.style.display = "block";
modalImg.src = images.getAttribute("data-highres");
};
}
<div class="container" style="width: 320px; height: 530px;">
<div class="pic_container" onclick="myFunction()">
<img src="https://i.pinimg.com/originals/de/a5/f1/dea5f10ecf2080ea8e5312ff9fa0db56.jpg"
data-highres="https://i.pinimg.com/originals/de/a5/f1/dea5f10ecf2080ea8e5312ff9fa0db56.jpg" class="image" style="width: 100%; height: auto;">
</div>
<h3 class="productName" style="padding: 0px !important; margin: 0px !important;">T-Shirt</h3>
<p class="productDisc" style="padding: 0px !important; margin: 0px !important;">Threadbare is currently sold in the UK, across Europe, Canada and America</p>
</div>
<div id="myModal" class="modal">
<!-- Close button -->
<span id="close_model"class="close">×</span>
<!-- Modal content -->
<img class="modal-content" id="modal-image">
</div>
答案 0 :(得分:0)
这样效果会更好。如果您有 jQuery,请使用它。
我删除了内联 onclick
$(function() {
const $modal = $('#myModal');
const $modalImage = $('#modal-image');
$('.container').on('click', '.image', function() { // assuming .container is STATIC!
$modalImage.attr('src', $(this).data('highres'));
$modal.show();
})
$('#close_model').on('click', function() {
$modal.hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" style="width: 320px; height: 530px;">
<div class="pic_container">
<img src="https://i.pinimg.com/originals/de/a5/f1/dea5f10ecf2080ea8e5312ff9fa0db56.jpg" data-highres="https://i.pinimg.com/originals/de/a5/f1/dea5f10ecf2080ea8e5312ff9fa0db56.jpg" class="image" style="width: 100%; height: auto;">
</div>
<h3 class="productName" style="padding: 0px !important; margin: 0px !important;">T-Shirt</h3>
<p class="productDisc" style="padding: 0px !important; margin: 0px !important;">Threadbare is currently sold in the UK, across Europe, Canada and America</p>
</div>
<div id="myModal" class="modal">
<!-- Close button -->
<span id="close_model" class="close">×</span>
<!-- Modal content -->
<img class="modal-content" id="modal-image">
</div>