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

Question

我正在使用 FlexSlider 的 this example，我需要从父数据属性中获取 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' )给出了undefined。看来我无法访问父数据属性。我做错了什么？

Answer 1

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

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

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

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

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

FlexSlider dynamic vars from parent data attributes

javascript

jquery

flexslider