根据数组中的 'data-title' attr 生成跨度内容
Generate span content based on 'data-title' attr from array
我不知道我在做什么。
我正在使用(最新版本(5.x))swiper.js。我在一个页面上有多个刷卡器,它们都共享完全相同的选项。当然,我可以初始化多个滑块,但我发现这是不必要的,因为一次初始化适用于所有滑块。另外,为了咯咯笑,我现在尝试使用推荐的方法来实现它们,但无论如何都行不通:
每个 swiper 幻灯片都有一个 data-title 属性,我想将其用作 swiper.js 选项中生成的 span 元素的数据。这些生成的 span 元素进入另一个 div(见代码)。
但是,出于某种原因,在 renderbullet 选项中,创建的跨度文本会重复使用第一个滑动条的属性,并将标题数组应用于所有其他滑动条。我的理解是数组在第一个滑动器中开始和停止,并使用该存储的数组作为其余的数据。我不想要这个。
我尝试了很多方法来使 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>';
},
}
});
显然在这一行:
var title = document.querySelectorAll('.swiper-slide').getAttribute('data-title');
you select ALL elements with class '.swiper-slide' ,当你在多个元素上使用 getAttribute 时,它将 return 第一次出现,这正是您描述的行为。
表示第一个参数是当前迭代的索引。
所以我使用 Jquery 来演示如何 select 正确的标题
renderBullet: function (index, className) {
var title = $('.swiper-slide').eq(index).attr('data-title');
return '<span class="' + className + '">' + title + '</span>';
}
这只适用于只有一个滑块的情况!由于您有多个滑块,因此您需要添加一个单独的 class 或 id 才能使用 select 或正确的 select,例如:
var title = $('#swiper1 .swiper-slide').eq(index).attr('data-title');
...
这是盲编码pseudo-code帮助你理解我的问题,进一步就看你好运了!
你可以这样做var title = $(this.$el).find('.swiper-slide').eq(index).attr("data-title");
它将使用 $(this.$el)
作为容器,然后您可以找到 swiper-slide
并获得 data-title
。
无论你有多少,这都应该有效。
注意: 在代码中我禁用了 '+className+'
因为它很难看到文本 '<span class="'+className+'">' + title + '</span>'
演示
var menu = ['Slide 1', 'Slide 2', 'Slide 3']
var mySwiper = new Swiper('.swiper-container', {
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function(index, className) {
var title = $(this.$el).find('.swiper-slide').eq(index).attr("data-title");
return '<span class="">' + title + '</span>';
//return '<span class="'+className+'">' + title + '</span>';
},
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
width: 50%;
margin: auto;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-pagination {
position: absolute;
top: 10px;
right: 10px;
width: auto !important;
left: auto !important;
margin: 0;
}
.swiper-pagination-bullet {
padding: 5px 10px;
border-radius: 0;
width: auto;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 12px;
color: #000;
opacity: 1;
background: rgba(0, 0, 0, 0.2);
}
.swiper-pagination-bullet-active {
color: #fff;
background: #007aff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<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>
我不知道我在做什么。
我正在使用(最新版本(5.x))swiper.js。我在一个页面上有多个刷卡器,它们都共享完全相同的选项。当然,我可以初始化多个滑块,但我发现这是不必要的,因为一次初始化适用于所有滑块。另外,为了咯咯笑,我现在尝试使用推荐的方法来实现它们,但无论如何都行不通:
每个 swiper 幻灯片都有一个 data-title 属性,我想将其用作 swiper.js 选项中生成的 span 元素的数据。这些生成的 span 元素进入另一个 div(见代码)。
但是,出于某种原因,在 renderbullet 选项中,创建的跨度文本会重复使用第一个滑动条的属性,并将标题数组应用于所有其他滑动条。我的理解是数组在第一个滑动器中开始和停止,并使用该存储的数组作为其余的数据。我不想要这个。
我尝试了很多方法来使 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>';
},
}
});
显然在这一行:
var title = document.querySelectorAll('.swiper-slide').getAttribute('data-title');
you select ALL elements with class '.swiper-slide' ,当你在多个元素上使用 getAttribute 时,它将 return 第一次出现,这正是您描述的行为。
表示第一个参数是当前迭代的索引。 所以我使用 Jquery 来演示如何 select 正确的标题
renderBullet: function (index, className) {
var title = $('.swiper-slide').eq(index).attr('data-title');
return '<span class="' + className + '">' + title + '</span>';
}
这只适用于只有一个滑块的情况!由于您有多个滑块,因此您需要添加一个单独的 class 或 id 才能使用 select 或正确的 select,例如:
var title = $('#swiper1 .swiper-slide').eq(index).attr('data-title');
...
这是盲编码pseudo-code帮助你理解我的问题,进一步就看你好运了!
你可以这样做var title = $(this.$el).find('.swiper-slide').eq(index).attr("data-title");
它将使用 $(this.$el)
作为容器,然后您可以找到 swiper-slide
并获得 data-title
。
无论你有多少,这都应该有效。
注意: 在代码中我禁用了 '+className+'
因为它很难看到文本 '<span class="'+className+'">' + title + '</span>'
演示
var menu = ['Slide 1', 'Slide 2', 'Slide 3']
var mySwiper = new Swiper('.swiper-container', {
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function(index, className) {
var title = $(this.$el).find('.swiper-slide').eq(index).attr("data-title");
return '<span class="">' + title + '</span>';
//return '<span class="'+className+'">' + title + '</span>';
},
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
width: 50%;
margin: auto;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-pagination {
position: absolute;
top: 10px;
right: 10px;
width: auto !important;
left: auto !important;
margin: 0;
}
.swiper-pagination-bullet {
padding: 5px 10px;
border-radius: 0;
width: auto;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 12px;
color: #000;
opacity: 1;
background: rgba(0, 0, 0, 0.2);
}
.swiper-pagination-bullet-active {
color: #fff;
background: #007aff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<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>