javascript - 来自父数据属性的 FlexSlider 动态变量

Question

我正在使用this example FlexSlider 的，我需要从父数据属性获取 itemWidth。

<div class="flexslider" data-item-width="500">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: $( this ).data( 'itemWidth' ),
    itemMargin: 5
  });
});

问题是 $( this ).data( 'itemWidth' ) 给出未定义。看来我无法访问父数据属性。我做错了什么？

Answer 1

使用.data()仅删除属性名称中的第一个“data-”。它不会重新格式化它。

此外，在这种情况下，this 指的是 window，因此它没有任何 data-item-width 属性。使用另一个选择器。

如果您尝试初始化具有不同属性的多个 FlexSlider，则应使用 $().each 来迭代它们。在这种情况下，您可以使用 this 来引用当前的 .flexslider 元素。

$('.flexslider').each(function() {
  $(this).flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: $( this ).data( 'item-width' ),
    itemMargin: 5
  });
});