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;

$(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;

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

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>

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

2 个答案: