BX Slider和Jquery

Question

我在我的网站http://kellyannart.com/test/portfolios/上使用了BX Slider。我正面临着一个问题..BX滑块工作得很好，但是有一些自定义的jQuery我想使用它。我已经为bx-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})
);
});

我总共有5个项目在bx-滑块...但是因为infiniteLoop被设置为true，所以它们继续重复..问题是，对于前5个项目(这是我实际拥有的项目数量)，如果我们单击图像，那么div id="imageBox“将加载相同的图像(这很完美)。但是当我们点击第六项时(因为infinteLoop被设置为真而重复)，大图片会在一个新的窗口中打开，而不是在id="imageBox“中加载。

另外，如果你点击前5个项目的“阅读更多”按钮，然后它试图在div id="imageBox“中加载它的href，但是当你点击第六个项目的”阅读更多“按钮时，它表现得很完美(即在浏览器中打开链接)我不知道为什么会发生这种情况。有什么建议吗？提前感谢:)

Answer 1

我找到了导致这一切的原因...首先，我为portfolio页面提供了一个启用/禁用幻灯片的选项，并为每个页面加载了自定义的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重复的。:)