jquery - “选择器无效或丢失！” 使用 jQuery Caption (Capty) 插件时

Question

我正在思考为什么我不能让它工作。我正在使用 jQuery Capty 插件。

https://github.com/wbotelhos/capty

在 prestashop 中，我在product-list.tpl.

包括在顶部的这个product-list.tpl：

<script type="text/javascript">
$('#animation').capty({
  animation: 'fade',
  speed:     400
});
</script>

这也在a href 内的图像文件中。

 <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" class="img-responsive" id="animation" alt="{$product.name|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

我得到的错误是：

选择器无效或丢失！

我似乎无法让它工作。有什么建议么。我相信我正在按照说明进行操作，但这就是我必须遗漏的地方。

Answer 1

我认为这是因为您在循环中分配了选择器 id="animation"。所以你得到的不是 DOM 中的唯一 ID 元素。让我们尝试对页面中的每个产品图像使用 class 而不是 id 或 init js-plugin，例如：

$('#animation_1, #animation_4, #animation_3').capty({...

和

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" class="img-responsive" id="animation_{$product.link_rewrite}" alt="{$product.name|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />