Question

我有选择CURRENT项目的向导列表，包括NEXT / PREVIOUS按钮，点击按钮我正在更新数据属性，以便我可以跟踪当前。

点击下一步其工作正常，看起来问题是我的eq（）在后退按钮

<h1 data-index="3"></h1>
<ul>
  <li class="done">1</li>
  <li class="done">2</li>
  <li class="sel">3</li>
  <li>4</li>
</ul>

<a href="javascript:;" id="back">back</a>
<a href="javascript:;" id="next">next</a>

jQuery：

let i = $('h1').data('index');
$('h1').html(i);

$('#next').on('click', function(e){
  let i1 = $('h1').data('index');
  if (i1 < 4) {
    $('ul li').eq(i1).addClass('sel');
    $('ul li').eq(i1).prevAll().addClass('done');

    i1 ++;
    $('h1').data('index', i1);
    $('h1').html(i1);
  }
});
$('#back').on('click', function(e){
  let i2 = $('h1').data('index');
  alert('i2 : ' + i2);
  if (i2 > 1) {
    i2--;
    $('h1').data('index', i2);
    $('h1').html(i2);

    $('ul li').removeClass('sel');
    $('ul li').eq(i2).addClass('sel');
    $('ul li').eq(i2).nextAll().removeClass('done');
    //$('ul li').eq(i2).nextAll().removeClass('done sel');
  }
});

这里是jsfiddle的链接

https://jsfiddle.net/mawLnqq0/

Answer 1

您的课程在后退按钮中有冲突，在done中添加sel课程时，您需要删除<li>课程。此外eq()索引从0开始，因此(i2-1)。

尝试使用此代码单击后退按钮

$('#back').on('click', function(e){
  let i2 = $('h1').data('index');
  alert('i2 : ' + i2);
  if (i2 > 1) {
    i2--;
    $('h1').data('index', i2);
    $('h1').html(i2);

    $('ul li').removeClass('sel');
    $('ul li').eq((i2-1)).removeClass('done').addClass('sel');
    $('ul li').eq((i2-1)).nextAll().removeClass('done');
    //$('ul li').eq(i2).nextAll().removeClass('done sel');
  }
});

Answer 2

我没有尝试修复您的代码。我发布了我的问题解决方案版本。这是 Working Fiddle

let index = 3;
$('#back').on('click', function(e) {
  let $current = $('.sel');
  if ($current.prev('li').length) {
      $current.removeClass('sel').prev('li').removeClass('done').addClass('sel');
      index--;
  }
  updateIndex();
});

function updateIndex() {
  $('h1').data('index', index).text(index);
}

let index = 3;
updateIndex();
$('#next').on('click', function(e) {
  let $current = $('.sel');
  if ($current.next('li').length) {
    $current.removeClass('sel').addClass('done').next('li').addClass('sel');
    index++;
  }
  updateIndex();
});
$('#back').on('click', function(e) {
  let $current = $('.sel');
  if ($current.prev('li').length) {
    $current.removeClass('sel').prev('li').removeClass('done').addClass('sel');
    index--;
  }
  updateIndex();
});

function updateIndex() {
  $('h1').data('index', index).text(index);
}

ul li {
  color: #333;
  font-size: 14px;
}

ul li.sel {
  color: red;
  font-size: 22px;
}

ul li.done {
  color: green;
  font-size: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 data-index="3"></h1>
<ul>
  <li class="done">1</li>
  <li class="done">2</li>
  <li class="sel">3</li>
  <li>4</li>
</ul>

<a href="javascript:;" id="back">back</a>
<a href="javascript:;" id="next">next</a>

向导使用jquery eq（）下一个和上一个按钮

2 个答案: