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属性。使用其他选择器。

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

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

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

1 个答案: