【发布时间】：2018-05-09 12:56:58
【问题描述】：
我有自定义分页是图像文件。通常它们保持灰色，但一旦单击，被单击的对象将其颜色变为绿色。
当我点击我的 bx 滑块上的“下一步”按钮（控件）时，我想让 2 件事发生。
- 幻灯片移至下一页。
- 显示幻灯片的相应寻呼机图标变为绿色，而其他图标保持灰色。
将控件与 bx-slide 链接很容易，但我似乎无法将自定义分页与控件链接。自定义分页器在单击时可以正常工作，并且在单击时分页也可以正常工作。但我无法将这两者连接起来同时工作。
我已经尝试了 2 个 jQuery 代码来完成这项任务，但没有一个有效。请看下文。
jQuery #1
这里发生的事件是“click”。单击“下一步”按钮后，我想找到正在显示的幻灯片的索引号，将其保存在变量 idx 中，然后单击具有相应索引号的寻呼机的子（标签）。
$('.bx-next').on('click', function(){
var idx=$('.benefit-slider li').find("[aria-hidden='false']").index(this);
$('#slidePager li').eq(idx).children().on('click');
};
jQuery #2
在此代码中，事件是更改寻呼机的属性。单击“下一步”按钮时，我想将正在显示的幻灯片的索引号保存在变量 idx2 中。然后，如果正在显示的幻灯片的索引号匹配 0，则相应的图像变为彩色（注意颜色图标以 -c 结尾，灰色图标以 -g 结尾）。
$('.bx-next').on('click', function(){
var idx2 = $('.benefit-container li').index(this);
if($('.benefit-container li').eq(idx2)==0){
$('.b-cost').attr('src','/img/benefit-lowcost-c.png');
$('.b-location').attr('src','/img/benefit-location-g.png');
$('.b-logistic').attr('src','/img/benefit-logistic-g.png');
$('.b-cs').attr('src','/img/benefit-cs-g.png');
};
else if($('.benefit-container li').eq(idx2)==1){
$('.b-cost').attr('src','/img/benefit-lowcost-g.png');
$('.b-location').attr('src','/img/benefit-location-c.png');
$('.b-logistic').attr('src','/img/benefit-logistic-g.png');
$('.b-cs').attr('src','/img/benefit-cs-g.png');
};
else if($('.benefit-container li').eq(idx2)==2){
$('.b-cost').attr('src','/img/benefit-lowcost-g.png');
$('.b-location').attr('src','/img/benefit-location-g.png');
$('.b-logistic').attr('src','/img/benefit-logistic-c.png');
$('.b-cs').attr('src','/img/benefit-cs-g.png');
};
else if($('.benefit-container li').eq(idx2)==3){
$('.b-cost').attr('src','/img/benefit-lowcost-g.png');
$('.b-location').attr('src','/img/benefit-location-g.png');
$('.b-logistic').attr('src','/img/benefit-logistic-g.png');
$('.b-cs').attr('src','/img/benefit-cs-c.png');
};
});
HTML
<!-- CUSTOM PAGER -->
<div class="benefit-container-wrap">
<ul id="slidePager">
<li class="b-conts1">
<a href="#">
<img src="img/benefit-lowcost-c.png" class="b-cost">
</a>
</li>
<li class="b-conts2">
<a href="#">
<img src="img/benefit-location-g.png" class="b-location">
</a>
</li>
<li class="b-conts3">
<a href="#">
<img src="img/benefit-logistic-g.png" class="b-logistic">
</a>
</li>
<li class="b-conts4">
<a href="#">
<img src="img/benefit-cs-g.png" class="b-cs">
</a>
</li>
</ul>
</div>
<!-- BX SLIDER -->
<div class="benefit-container col-sm-7 col-md-6">
<ul class="benefit-slider">
<li>
<h3 class="b-cost">Competitive Price</h3>
</li>
<li>
<h3 class="b-location">Optimal Location</h3>
</li>
<li>
<h3 class="b-logistic">Total Logistic Solution</h3>
</li>
<li>
<h3 class="b-customer">Outstanding Customer Services</h3>
</li>
</ul>
</div>
加载 Bx-Slider jQuery
// load bx-slider//
$('.benefit-slider').bxSlider({
pagerCustom:'#slidePager',
controls: true
});
//BxSlider custom pager //
$('.b-conts1').on('click',function(e){
e.preventDefault();
$('.b-cost').attr('src','/img/benefit-lowcost-c.png');
$('.b-location').attr('src','/img/benefit-location-g.png');
$('.b-logistic').attr('src','/img/benefit-logistic-g.png');
$('.b-cs').attr('src','/img/benefit-cs-g.png');
});
$('.b-conts2').on('click',function(e){
e.preventDefault();
$('.b-cost').attr('src','/img/benefit-lowcost-g.png');
$('.b-location').attr('src','/img/benefit-location-c.png');
$('.b-logistic').attr('src','/img/benefit-logistic-g.png');
$('.b-cs').attr('src','/img/benefit-cs-g.png');
});
$('.b-conts3').on('click',function(e){
e.preventDefault();
$('.b-cost').attr('src','/img/benefit-lowcost-g.png');
$('.b-location').attr('src','/img/benefit-location-g.png');
$('.b-logistic').attr('src','/img/benefit-logistic-c.png');
$('.b-cs').attr('src','/img/benefit-cs-g.png');
});
$('.b-conts4').on('click',function(e){
e.preventDefault();
$('.b-cost').attr('src','/img/benefit-lowcost-g.png');
$('.b-location').attr('src','/img/benefit-location-g.png');
$('.b-logistic').attr('src','/img/benefit-logistic-g.png');
$('.b-cs').attr('src','/img/benefit-cs-c.png');
});
任何帮助将不胜感激！谢谢。
【问题讨论】：
-
你能把你的代码的jQuery部分贴在你加载bxSlider的地方吗？
-
@zer00ne 我上传了 bxSlider 加载的 jQery 部分并链接了自定义寻呼机。