Question

我有一个jquery内容滑块，我是从头开始构建的，带有'previous'和'next'按钮和分页。

如何实现增量代码，以便每次单击“下一步”时，我的选择器元素类的类更改为.no2，.no3等等，再到达.no7后再次开始循环？

我显然希望前一个按钮能够反过来实现相同的效果。

（视觉上发生的事情是当点击“下一步”按钮时，dot.png沿时间轴移动，创建分页效果）

.no1{
    background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:8px 53px,left bottom; background-repeat:no-repeat;"}

.no2{
background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:81px 53px,left bottom ; background-repeat:no-repeat;"}

.no3{
background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:154px 53px,left bottom ; background-repeat:no-repeat;"}

.no4{
background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:227px 53px,left bottom ; background-repeat:no-repeat;"}

.no5{
background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:300px 53px,left bottom ; background-repeat:no-repeat;"}

.no6{
background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:373px 53px,left bottom ; background-repeat:no-repeat;"}

.no7{
background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:446px 53px,left bottom ; background-repeat:no-repeat;"}

Answer 1

如果noN是该元素上唯一的一个类，那么它就更简单了：

$('.next').click(function() {
  var $el = $('#someElement'),  
      elClass = $el.attr('class'),
      parts = elClass.match(/(no)([1-7])/);
  if (parts[2] === '7') {
    parts[2] = 1;
  }
  else {
    parts[2]++;
  }
  $el.removeClass(elClass).addClass(parts[1] + parts[2]);
});

此处.next引用您的next按钮，#someElement - 指向您要循环的元素类。

如何实现增量代码以顺序更新我的选择器类

1 个答案: