php - jquery - 在 document.ready() 上创建实例后更改对象属性

Question

我在自定义 Magento 商店中使用 bxSlider 插件(类似于 jcarousel 的 slider )。

虽然通过这种方式在 documet.ready() 上(在 head html 部分)确定了 slider :

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

如果 slider 项数小于 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 ready 上实例化的对象的属性是否可以通过这种方式更改。有人可以帮忙吗？

Answer 1

jQuery 库中的 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。

---

似乎有一个 Bug 导致 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>";
?>