Question

我在我的网站http://kellyannart.com/test/portfolios/上使用BX Slider ..我正面临一个问题.. BX滑块工作正常但有一些自定义jQuery我想用它...我已经设置了以下bx-slider的参数 displaySlideQty：4 infiniteLoop：true

我使用的自定义jQuery是：

jQuery(".single_portfolio_item_archive a").click(function(evt) {
evt.preventDefault();
jQuery("#imageBox").empty().append(
    jQuery("<img>", { src: this.href})
);
});

我在bx-slider中总共有5个项目...但是因为infiniteLoop设置为true，所以他们继续重复.. 问题是，对于前5项（这是我拥有的实际项目数），如果我们点击图像然后div id =“imageBox”加载相同的图像（这是完美的）..但是当我们点击第6项（由于infinteLoop已被设置为true而重复）大图像在新窗口中打开而不是在div id =“imageBox”中加载

此外，如果您单击前5项的“Read More”按钮，则会尝试在div id =“imageBox”中加载其href，但是当您单击第6项的“Read More”按钮时，它会表现出来完美（即在浏览器中打开链接）我不知道为什么会发生这种情况.. 有什么建议？在此先感谢：）

Answer 1

我找到了造成这种情况的原因...... 首先，我有一个幻灯片启用/禁用选项组合页面，我加载他们每个的自定义jquery代码..但我没有放一个if语句来检查幻灯片是否启用或禁用..所以第一个脚本应该加载当幻灯片显示启用时，第二个应该在幻灯片显示被禁用时加载...在我的情况下，两者都加载，无论幻灯片启用或禁用。其次我尝试了document.ready（）

<?php 
if( is_post_type_archive( 'portfolios' ) || is_taxonomy( 'styles' ) || is_taxonomy( 'colors' ) || is_taxonomy( 'textures' ) || is_taxonomy( 'years' ) ) : ?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".single_portfolio_item_archive a").click(function(evt) {
evt.preventDefault();
jQuery("#imageBox").empty().append(
    jQuery("<img>", { src: this.href})
);
})
});
</script>
<?php endif; ?>

document.ready确保脚本正在应用于每个元素..甚至是那些被bx-slider重复的元素。：）

BX Slider和Jquery

1 个答案: