Question

我有一个动态滑块。并尝试在父元素tabindex="-1"具有li属性的情况下向子元素添加aria-hidden="true"属性。

或参见以下代码段：

$('.bxslider').bxSlider({
  minSlides: 3,
  maxSlides: 3,
  moveSlides: 1,
  slideWidth: 150,
  slideMargin: 0
});

$('li[aria-hidden=true]').children().attr('tabindex', '-1');

body {
  margin: 50px 0 0 30px;
}

.my-slider {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css" rel="stylesheet" />

<ul class="my-slider bxslider">
  <li><a href="#">aaa</a> </li>
  <li><a href="#">bbb</a> </li>
  <li><a href="#">ccc</a> </li>
  <li><a href="#">dd</a> </li>
  <li><a href="#">eee</a> </li>
</ul>

如何更改代码的动态属性？

请帮助

Answer 1

您必须使用BxSlider onSlideAfter回调。

在每次幻灯片转换后立即执行。函数参数是当前幻灯片元素（转换完成时）。

请参见documentation。

$('.bxslider').bxSlider({
  minSlides: 3,
  maxSlides: 3,
  moveSlides: 1,
  slideWidth: 150,
  slideMargin: 0,

  onSlideAfter: function(){
    $('li[aria-hidden=true]').children().attr('tabindex', '-1');
  }
});

您的Fiddle Updated。

Answer 2

如Louys所述，您应该使用onSlideAfter回调函数：

但是为了删除tabindex，您需要进行一些小的改动，您应该从所有以aria-hidden=true添加到li的li的孩子中删除

通过添加$('.bxslider li').children().removeAttr('tabindex');

请参见以下代码段：

$('.bxslider').bxSlider({
  minSlides: 3,
  maxSlides: 3,
  moveSlides: 1,
  slideWidth: 150,
  slideMargin: 0,
  onSlideAfter : function(elt,oldIndex,neIndex) {
   $('.bxslider li').children().removeAttr('tabindex');
   $('li[aria-hidden=true]').children().attr('tabindex', '-1');
  }
});

$('li[aria-hidden=true]').children().attr('tabindex', '-1');

body {
  margin: 50px 0 0 30px;
}

.my-slider {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css" rel="stylesheet" />

<ul class="my-slider bxslider">
  <li><a href="#">aaa</a> </li>
  <li><a href="#">bbb</a> </li>
  <li><a href="#">ccc</a> </li>
  <li><a href="#">dd</a> </li>
  <li><a href="#">eee</a> </li>
</ul>

如何更改滑块上的动力学属性

2 个答案: