Question

我在自定义Magento商店使用bxSlider插件（类似于jcarousel的滑块）。

虽然滑块是通过这种方式在documet.ready（）（在head html部分）中实现的：

jQuery('#slider2').bxSlider({
    pause: 4000,
    auto: true,
    autoControls: true,
    displaySlideQty: 4,
    moveSlideQty: 1
});

如果滑块项数小于5，我想在php代码中将auto属性更改为false。我试图用以下方法更改它：

<?php
    // slider items count
    $prom_count = $this->getPromotionalProducts()->count();;
?>
<?php if($prom_count<5): ?>
    <script>
        $("#slider2").attr('auto','false');    
    </script>
<?php endif; ?>

但是它不起作用，所以我不确定在dom上实例化的对象的属性是否可以通过这种方式改变。任何人都可以帮忙吗？

Answer 1

看起来没有API功能。如果使用reloadShow（），可能会再次加载配置。如果这没有帮助，您必须阅读source code。

Answer 2

jQuery-library中的attr - 方法使用HTML元素的属性：

<img src="..." alt="...">

在这种情况下，src和alt是“属性”。

通过为bxSlider - 函数提供数组来配置bxSlider。传递给函数后，您无法更改此数组。

切换自动播放的方法是使用bxSlider的stopShow() - 函数。要做到这一点，你需要保存你创建的bxSlider实例：

var slider = jQuery('#slider2').bxSlider({
   ...
});

因此，您可以在此对象上调用该函数：

slider.stopShow();

以混合的方式（如你所建议的那样）使用PHP和JavaScript这样做很难看，应该避免使用。

相反，您应该使用仅限JavaScript的解决方案：

var slider = jQuery('#slider2').bxSlider({
   auto: true,
   ...
});
if (slider.getSlideCount() < 5){
  slider.stopShow();
}

请注意getSlideCount()会返回幻灯片的数量，不保证是图库中的图片数量！可以通过displaySlideQty - 属性设置一次显示的幻灯片数量。但默认值为1。

发现有错误会导致startShow和stopShow - 函数无效：https://github.com/wandoledzep/bxslider/pull/43

作为一种肮脏的解决方法，您可以执行以下操作：

<?php
    echo "<script type=\"text/javascript\">
        jQuery('#slider2').bxSlider({
            pause: 4000,
            autoControls: true,
            displaySlideQty: 4,";
    if($prom_count >= 5) echo "auto: true,";
    echo "moveSlideQty: 1
        });
    </script>";
?>

Answer 3

这将在自己的元素上设置auto属性，而不是插件的自动选项。虽然我只是快速查看，但它看起来并不像插件能够更改选项。

通过将php代码放在首位来运行插件时，是否可以设置正确的auto值？

jquery - 在document.ready（）上创建实例后更改对象属性

3 个答案: