Question

我正在使用bxSlider，我使用pagerCustom选项创建了一个自定义寻呼机。我希望寻呼机看起来像一个缩略图寻呼机，所以我尝试复制每张幻灯片的样式并将其附加到每个寻呼机。示例：寻呼机1应具有幻灯片1的样式，幻灯片2的寻呼机2，依此类推..

这就是我现在作为寻呼机所拥有的：

<div class="custom-pager">
 <a data-slide-index="0" href="" class="">1</a>
 <a data-slide-index="1" href="" class="active">2</a>
 <a data-slide-index="2" href="" class="">3</a>
 <a data-slide-index="3" href="" class="">4</a>
</div>

我的jQuery代码是这样的：

$('#slider .custom-pager a').each(function(){
 var test = $(this).parent().index();
 $(this).attr('style', $('*[data-slide=" ' + test + ' "]').attr('style'));
});

我将数据幻灯片添加到每个bxSlider列表中：

<ul class="bxslider" style="width: auto; position: relative;">
    <li data-slide="0" style="background: transparent url(&quot;_assets_/images/slide-1.jpg&quot;) no-repeat scroll center center / cover ; float: none; list-style: outside none none; position: absolute; width: 1903px; z-index: 0; display: none;"></li>
    <li data-slide="1" style="background: transparent url(&quot;_assets_/images/slide-2.jpg&quot;) no-repeat scroll center center / cover ; float: none; list-style: outside none none; position: absolute; width: 1903px; z-index: 50; display: list-item;"></li>
    <li data-slide="2" style="background: transparent url(&quot;_assets_/images/slide-1.jpg&quot;) no-repeat scroll center center / cover ; float: none; list-style: outside none none; position: absolute; width: 1903px; z-index: 0; display: none;"></li>
    <li data-slide="3" style="background: transparent url(&quot;_assets_/images/slide-2.jpg&quot;) no-repeat scroll center center / cover ; float: none; list-style: outside none none; position: absolute; width: 1903px; z-index: 0; display: none;"></li>
</ul>

Answer 1

这个

$('*[data-slide=" ' + test + ' "]')

基于你的html在两个方面是错误的：

您的属性是＆＃39; data-slide-index＆＃39;不是＆＃39;数据幻灯片＆＃39;。
你有额外的空格，你在平等之后不需要（你也不需要以*开头）。额外的空间意味着该值应该是例如＆＃39; 1＆＃39;而不是＆＃39; 1＆＃39;。

所以你的选择不是选择任何东西。您可以使用：

$('[data-slide-index="' + test + '"]')

另外，请考虑$（）。css（）是否对您有用。不确定你想要实现的目标。

Answer 2

如果您使用传递给.each()的索引，则不需要使用test，如@TigOldBitties所述，您的选择器上还有一些额外的空格。试试这个

$('#slider .custom-pager a').each(function(index){
    $(this).attr('style', $('[data-slide="' + index + '"]').attr('style'));
});

jQuery获取具有特定数据属性值

2 个答案: