时间戳

首页 > 解决方案 > 根据数组中的“数据标题”属性生成跨度内容

javascript - 根据数组中的“数据标题”属性生成跨度内容

问题描述

我不知道我在做什么。

我正在使用（最新版本（5.x））swiper.js。我在一个页面上有多个滑动器，它们都共享完全相同的选项。当然，我可以初始化多个滑块，尽管我发现这是不必要的，因为一个初始化适用于所有滑块。同样对于咯咯笑，我现在尝试使用推荐的方法来实现它们，但无论如何它都没有用：

每个 swiper 幻灯片都有一个 data-title 属性，我想将其用作 swiper.js 选项中生成的 span 元素的数据。这些生成的 span 元素进入另一个 div（参见代码）。

然而，出于某种原因，在 renderbullet 选项中，创建的跨度文本会重用第一个 swiper 的属性并将标题数组应用于所有其他 swiper。我的理解是数组在第一个 swiper 中开始和停止，并将该存储的数组用作其余部分的数据。我不希望这样。

我尝试了多种方法来使 data-title 属性文本正确但没有成功。

我得到的最接近的是 map(); 这告诉我有 21 个数组是正确的。然而，当我尝试使用这些数据时，每个跨度都有 21 个标题。对此的一些帮助将不胜感激。

请看我下面的代码：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" data-title="The Title_A0">
      <!--content-->
    </div>
    <div class="swiper-slide" data-title="The Title_A1">
      <!--content-->
    </div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-pagination">
        <!-- GENERATED SPAN GOES HERE -->
      <span class="className">The Title_A0</span>
      <span class="className">The Title_A1</span>
    <!-- GENERATED SPAN GOES HERE -->
  </div>
</div>


<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" data-title="The Title_B0">
      <!--content-->
    </div>
    <div class="swiper-slide" data-title="The Title_B1">
      <!--content-->
    </div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-pagination">
    <!-- GENERATED SPAN GOES HERE -->
      <span class="className">The Title_A0</span> <!-- I want <span class="className">The Title_B0</span>-->
      <span class="className">The Title_A1</span> <!-- I want <span class="className">The Title_B1</span>-->
    <!-- GENERATED SPAN GOES HERE -->
  </div>
</div>


var swiper = new Swiper('.swiper-container', {

    pagination: {
        renderBullet: function (className, title) {
            var title = document.querySelectorAll('.swiper-slide').getAttribute('data-title');
            return '<span class="' + className + '">' + title + '</span>';
        },
    }
    
});

标签： javascripthtmljquerycssswiper

解决方案

显然在这一行：

var title = document.querySelectorAll('.swiper-slide').getAttribute('data-title');

您选择具有类 '.swiper-slide' 的所有元素，当您在多个元素上使用 getAttribute 时，它​​将返回第一次出现，这正是您描述的行为。

查看swiper 文档进行分页

它声明第一个参数是当前迭代的索引。所以我使用 Jquery 来演示如何选择正确的标题

renderBullet: function (index, className) {
    var title = $('.swiper-slide').eq(index).attr('data-title');
    return '<span class="' + className + '">' + title + '</span>';
}

这仅在有一个滑块时有效！由于您有多个滑块，您需要添加一个单独的类或 id 才能使用选择正确的选择器，例如：

var title = $('#swiper1 .swiper-slide').eq(index).attr('data-title');
...

这是盲编码的伪代码，可以帮助您理解问题，一切都取决于您，祝您好运！

推荐阅读