如何使用项目符号和箭头添加/删除类

Question

当用户点击相应的数字或上一个/下一个箭头时，我无法弄清楚如何在div中添加和删除一个类。

注意第二项以及第二项导航的“有效”类。当用户点击“1”或“上一个”箭头时，我希望将该类删除并添加到第一个项目并导航。

.wrap {
  display: block;
  width: 200px;
  margin: 50px auto;
  text-align: center;
}

.nav {
  margin-bottom: 10px;
}
.nav a {
  padding: 5px;
}
.nav a:hover {
  font-weight: 900;
  cursor: pointer;
}
.nav a.active {
  border-bottom: 1px solid black;
  font-weight: 900;
}

.prev, .next {
  display: inline-block;
  padding: 5px;
}
.prev:hover, .next:hover {
  font-weight: 900;
  cursor: pointer;
}

.items div {
  display: none;
  padding: 25px;
}
.items .one {
  background: red;
}
.items .two {
  background: green;
}
.items .three {
  background: blue;
}
.items .active {
  display: inline-block;
}

<div class="wrap">
  <div class="nav">
    <a class="one">1</a>
    <a class="two active">2</a>
    <a class="three">3 </a>
  </div>
  <div class="items">
    <span class="prev"><</span>
    <div class="one">ONE</div>
    <div class="two active">TWO</div>
    <div class="three">THREE</div>
    <span class="next">></span>
  </div>
</div>

http://codepen.io/bbbenji/pen/WovJEM

Answer 1

您可以尝试这样的事情：

$('.next, .prev').on('click', function() {
  var $cur = $(this).closest('.wrap').find('.items div.active');
  var $nav = $(this).closest('.wrap').find(' .nav a.active')

  if ($(this).hasClass('next')) {
    if ($cur.next('div').length === 0) return
    $cur.next('div').addClass('active');
    $nav.next('a').addClass('active');
  } else {
    if ($cur.prev('div').length === 0) return
    $cur.prev('div').addClass('active');
    $nav.prev('a').addClass('active');
  }
  $cur.removeClass('active')
  $nav.removeClass('active')
})

$('.nav a').on('click', function() {
  var index = $(this).index();
  $(this).closest('.wrap').find('.items div').removeClass('active').eq(index).addClass('active')
  $(this).closest('.wrap').find('.nav a').removeClass('active').eq(index).addClass('active')
})

.wrap {
  display: block;
  width: 200px;
  margin: 50px auto;
  text-align: center;
}
.nav {
  margin-bottom: 10px;
}
.nav a {
  padding: 5px;
}
.nav a:hover {
  font-weight: 900;
  cursor: pointer;
}
.nav a.active {
  border-bottom: 1px solid black;
  font-weight: 900;
}
.prev,
.next {
  display: inline-block;
  padding: 5px;
}
.prev:hover,
.next:hover {
  font-weight: 900;
  cursor: pointer;
}
.items div {
  display: none;
  padding: 25px;
}
.items .one {
  background: red;
}
.items .two {
  background: green;
}
.items .three {
  background: blue;
}
.items .active {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="wrap">
  <div class="nav">
    <a class="one">1</a>
    <a class="two active">2</a>
    <a class="three">3 </a>
  </div>
  <div class="items">
    <span class="prev"><</span>
    <div class="one">ONE</div>
    <div class="two active">TWO</div>
    <div class="three">THREE</div>
    <span class="next">></span>
  </div>
</div>

<div class="wrap">
  <div class="nav">
    <a class="one">1</a>
    <a class="two active">2</a>
    <a class="three">3 </a>
  </div>
  <div class="items">
    <span class="prev"><</span>
    <div class="one">ONE</div>
    <div class="two active">TWO</div>
    <div class="three">THREE</div>
    <span class="next">></span>
  </div>
</div>

Answer 2

以下是使用index

执行此操作的另一种方法

＆＃13;

＆＃13;

var classes = ["one", "two", "three"];
var currentIndex = 1;

$('.next, .prev').on('click', function() {
  if ($(this).hasClass('next')) {
    if (currentIndex === classes.length - 1) return;
    removeAndAddActive(currentIndex, ++currentIndex);
  } else {
    if (currentIndex === 0) return;
    removeAndAddActive(currentIndex, --currentIndex);
  }
})

$('.nav a').on('click', function() {
  let index = $(this).index();
  removeAndAddActive(currentIndex, index);
  currentIndex = index;
})

function removeAndAddActive(removeIndex, addIndex) {
  $('.' + classes[removeIndex]).removeClass('active');
  $('.' + classes[addIndex]).addClass('active');
}

＆＃13;

.wrap {
  display: block;
  width: 200px;
  margin: 50px auto;
  text-align: center;
}
.nav {
  margin-bottom: 10px;
}
.nav a {
  padding: 5px;
}
.nav a:hover {
  font-weight: 900;
  cursor: pointer;
}
.nav a.active {
  border-bottom: 1px solid black;
  font-weight: 900;
}
.prev,
.next {
  display: inline-block;
  padding: 5px;
}
.prev:hover,
.next:hover {
  font-weight: 900;
  cursor: pointer;
}
.items div {
  display: none;
  padding: 25px;
}
.items .one {
  background: red;
}
.items .two {
  background: green;
}
.items .three {
  background: blue;
}
.items .active {
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="wrap">
  <div class="nav">
    <a class="one">1</a>
    <a class="two active">2</a>
    <a class="three">3 </a>
  </div>
  <div class="items">
    <span class="prev"><</span>
    <div class="one">ONE</div>
    <div class="two active">TWO</div>
    <div class="three">THREE</div>
    <span class="next">></span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;