javascript - 如何更改 slider 上的动态属性

Question

我有一个动态 slider 。并尝试在父 li 元素具有 aria-hidden="true" 属性时向子元素添加 tabindex="-1" 属性。

这里是 Fiddle example :

或者看下面的片段:

$('.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

正如 Louys 所报告的，您应该使用 onSlideAfter 回调函数:

但为了删除 tabindex，您应该从所有使用 aria-hidden=true

添加到 li 的子级中删除 tabindex

通过添加 $('.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>