向导使用jquery () next和next按钮

Question

我有向导喜欢选择当前项目的列表，包括下一个/先前的按钮，点击按钮我更新数据属性，这样我就可以跟踪当前。

单击“下一步工作良好”时，“后退”按钮中的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

在back按钮中，类是相互冲突的，当在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

我还没试过修改你的密码。我贴出了我对你问题的解决方案。这是一个工频

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>

​