jquery next（）和prev（）不起作用

Question

我在使用jquery next和prev

时遇到了一些麻烦

我如何从兄弟姐妹中获得下一个或上一个值 当我点击下一个或上一个时它将存储值，并且每当班级显示移动时它将被更新。

$(document).ready(function(){
  
});
var currentIndex = 0;
var boxTotal = $('.content').length;
var boxIndex = $('.content.show').index();

var imgNext = $('.content.show').next().text();
var imgPrev = $('.content.show').prev().text();

function cycleItems() {
  var box = $('.content').eq(currentIndex);
  box.siblings().removeClass('show');
  box.addClass('show');
}

function boxNext(){
  currentIndex ++;
  if (currentIndex > boxTotal - 1) {
    currentIndex = 0;
  }
}

function boxPrev(){
  currentIndex --;
  if (currentIndex < 0) {
    currentIndex = boxTotal - 1;
  }
}

$('.next').click(function() {
  boxNext();
  cycleItems();
  $('.valPrev').text('is '+imgPrev);
  $('.valNext').text('is '+imgNext);
});

$('.prev').click(function() {
  boxPrev();
  cycleItems();
  $('.valPrev').text('is '+imgPrev);
  $('.valNext').text('is '+imgNext);
});

.content{
  display: none;
}

.content.show{
  display: block;
}
.content img{
  width: 300px;
  height: 300px;
}

.prev img, .next img{
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="content"><span>1</span></div>
  
  <div class="content show"><span>2</span></div>
  
  <div class="content"><span>3</span></div>
  
  <div class="content"><span>4</span></div>
  
  <div class="content"><span>5</span></div>
</div>


<div class="prev">
<label>Prev</label> <span class="valPrev"></span>
</div>
<div class="next"> 
<label>Next</label> <span class="valNext"></span>
</div>

Answer 1

问题是因为您只在加载时设置imgNext和imgPrev。您需要在单击其中一个标签时更新它们。最简单和最干燥的方法是将更新值的代码放在cycleItems函数中，如下所示：

＆＃13;

＆＃13;

$(document).ready(function() {
  var currentIndex = 0;
  var boxTotal = $('.content').length;
  var boxIndex = $('.content.show').index();

  function cycleItems() {
    $('.content').eq(currentIndex).addClass('show').siblings().removeClass('show');
    var imgNext = $('.content.show').next().text();
    var imgPrev = $('.content.show').prev().text();
    $('.valPrev').text('is ' + imgPrev);
    $('.valNext').text('is ' + imgNext);
  }

  $('.next').click(function() {
    currentIndex++;
    if (currentIndex > boxTotal - 1)
      currentIndex = 0;

    cycleItems();
  });

  $('.prev').click(function() {
    currentIndex--;
    if (currentIndex < 0)
      currentIndex = boxTotal - 1;

    cycleItems();
  });
});

＆＃13;

.content {
  display: none;
}

.content.show {
  display: block;
}

.content img {
  width: 300px;
  height: 300px;
}

.prev img,
.next img {
  width: 100px;
  height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="content"><span>1</span></div>
  <div class="content show"><span>2</span></div>
  <div class="content"><span>3</span></div>
  <div class="content"><span>4</span></div>
  <div class="content"><span>5</span></div>
</div>

<div class="prev">
  <label>Prev</label> <span class="valPrev"></span>
</div>
<div class="next">
  <label>Next</label> <span class="valNext"></span>
</div>

＆＃13;

＆＃13;

＆＃13;

请注意，我也简化了地方的逻辑。

Answer 2

你是说这个意思吗？您需要在更改内容之前每次都获取文本

$(document).ready(function() {


  var currentIndex = 0;
  var boxTotal = $('.content').length;
  var boxIndex = $('.content.show').index();


  function cycleItems() {
    var imgNext = $('.content.show').next().text();
    var imgPrev = $('.content.show').prev().text();
    $('.valPrev').text('is ' + imgPrev);
    $('.valNext').text('is ' + imgNext);

    var box = $('.content').eq(currentIndex);
    box.siblings().removeClass('show');
    box.addClass('show');

  }

  function boxNext() {
    currentIndex++;
    if (currentIndex > boxTotal - 1) {
      currentIndex = 0;
    }
  }

  function boxPrev() {
    currentIndex--;
    if (currentIndex < 0) {
      currentIndex = boxTotal - 1;
    }
  }

  $('.next').click(function() {
    boxNext();
    cycleItems();
  });

  $('.prev').click(function() {
    boxPrev();
    cycleItems();
  });
});

.content {
  display: none;
}

.content.show {
  display: block;
}

.content img {
  width: 300px;
  height: 300px;
}

.prev img,
.next img {
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="content"><span>1</span></div>

  <div class="content show"><span>2</span></div>

  <div class="content"><span>3</span></div>

  <div class="content"><span>4</span></div>

  <div class="content"><span>5</span></div>
</div>


<div class="prev">
  <label>Prev</label> <span class="valPrev"></span>
</div>
<div class="next">
  <label>Next</label> <span class="valNext"></span>
</div>