<div class="product-action">
<a href="#" class="btn-product btn-quickview1" onclick="init_popup(<?php echo $row["product_id"]; ?>, event)"
title="view item">item detail</a>
</div>
字符串
我是JavaScript的新手,但还不能让它工作。我有这个main_item_detail文件,在这个文件里面我有一个项目滑块,显示所选项目的一些图像,所以当用户点击特定的“项目详细信息”按钮时,它会打开快速查看与所选项目详细信息的放大弹出窗口。
<!-- Start of Quick View -->
<div class="product product-single product-popup" id="popup_detail_<?php echo $row["product_id"]; ?>" >
<div class="text-right">
<input class="form-control" type="hidden" id="item_id" name="item_id" value="<?php echo $row[0];?>"/>
<button type="button" class="btn btn-sm btn-outline-light" onclick="_prev_id(<?php echo $row["product_id"]; ?>, event);" title="Produkti paraprak"><i class="fas fa-arrow-left"></i></button>
<button type="button" class="btn btn-sm btn-outline-light btn-next-product" onclick="_next_id(<?php echo $row["product_id"]; ?>, event);" title="Produkti i radhes"><i class="fas fa-arrow-right"></i></button>
</div>
<div class="row gutter-lg" id="display_item">
</div>
</div>
<!-- End of Quick view -->
型
这是一个从 AJAX 加载内容的弹出窗口加载到“display_item”div中的函数。
function init_popup(product_id, e)
{
e.preventDefault();
$.ajax({
url:"popup_item.php",
method:"POST",
data:{product_id:product_id},
success:function(data)
{
$('#display_item').html(data);
// document.querySelector('#display_item').innerHTML = data; // returns same content
document.getElementById("item_id").value = product_id;
}
});
}
型
这是弹出窗口(popup_item.php)
<div class="col-md-6 mb-4 mb-md-0">
<div class="product-gallery product-gallery-sticky">
<div class="swiper-container product-single-swiper swiper-theme nav-inner">
<div class="swiper-wrapper row cols-1 gutter-no">
<?php
for ($i = 0; $i < count($images)-1; $i++)
{
?>
<div class="swiper-slide">
<figure class="product-image">
<img src="../images/images/gallery/preview/<?php echo trim($images[$i]); ?>"
data-zoom-image="../images/images/gallery/original/<?php echo trim($images[$i]); ?>"
alt="Water Boil Black Utensil" width="800" height="900">
</figure>
</div>
<?php
}
?>
</div>
<button class="swiper-button-next"></button>
<button class="swiper-button-prev"></button>
</div>
<div class="product-thumbs-wrap swiper-container" data-swiper-options="{
'navigation': {
'nextEl': '.swiper-button-next',
'prevEl': '.swiper-button-prev'
}
}">
<div class="product-thumbs swiper-wrapper row cols-4 gutter-sm">
<?php
for ($i = 0; $i < count($images)-1; $i++)
{
?>
<div class="product-thumb swiper-slide">
<img src="../images/images/gallery/preview/<?php echo trim($images[$i]); ?>" alt="Product Thumb" width="103"
height="116">
</div>
<?php
}
?>
</div>
<button class="swiper-button-next"></button>
<button class="swiper-button-prev"></button>
</div>
</div>
</div>
型
问题出在JavaScript功能上。当弹出窗口打开时,它应该能够通过滑动和选择一个项目来导航滑动滑动项目,还有其他功能,但它只是保持冻结,在JavaScript中没有功能,只有项目细节(CSS脚本加载良好)。我检查了控制台,但输出中没有报告错误。
- 谢谢-谢谢
1条答案
按热度按时间wtlkbnrh1#
尝试调用
swiper.update()
方法https://swiperjs.com/swiper-api#methods--properties。或者为每个Swiper HTML结构创建一个唯一的ID。然后在加载 AJAX init Swiper之后。https://swiperjs.com/swiper-api#initialize-swiper