循环遍历轮播中的数组数据不起作用

Question

我正在尝试在 JS 中构建一个轮播，它使用数组来存储我的数据。我希望左侧的框显示 "Client" 的值，右侧的框显示 "Candidate" 的值。

尽管我认为一切都是正确的，但我似乎无法让它工作？

let testimonials = [{
    client: "Raphel",
    candidate: "male"
  },
  {
    client: "Tom",
    candidate: "male"
  },
  {
    client: "Jerry",
    candidate: "male"
  },
  {
    client: "Dorry",
    candidate: "female"
  }
];

var i = 0;

function nextItem() {
  i = i + 1;
  i = i % testimonials.length;
  return testimonials[i].candidate;
}

function prevItem() {
  if (i === 0) {
    i = testimonials.length;
  }
  i = i - 1;
  return testimonials[i].client;
}

window.addEventListener('load', function() {
  $('.client-box').html(testimonials[i].client);
  $('.candidate-box').html(testimonials[i].candidate);

  $('.left-btn').on('click', function(e) {
    $('.client-box').html(prevItem());
    $('.candidate-box').html(prevItem());
  });

  $('.right-btn').on('click', function(e) {
    $('.client-box').html(nextItem());
    $('.candidate-box').html(nextItem());
  });


});

https://jsfiddle.net/cL5mok3f/

Answer 1

修复代码：

let testimonials = [{
    client: "Raphel",
    candidate: "male"
  },
  {
    client: "Tom",
    candidate: "male"
  },
  {
    client: "Jerry",
    candidate: "male"
  },
  {
    client: "Dorry",
    candidate: "female"
  }
];

var i = 0;

function nextItem() {
  i = i + 1;
  i = i % testimonials.length;
  return testimonials[i];
}

function prevItem() {
  if (i === 0) {
    i = testimonials.length;
  }
  i = i - 1;
  return testimonials[i];
}

window.addEventListener('load', function() {
  $('.client-box').html(testimonials[i].client);
  $('.candidate-box').html(testimonials[i].candidate);

  $('.left-btn').on('click', function(e) {
    var prev = prevItem();
    $('.client-box').html(prev.client);
    $('.candidate-box').html(prev.candidate);
  });

  $('.right-btn').on('click', function(e) {
    var next = nextItem();
    $('.client-box').html(next.client);
    $('.candidate-box').html(next.candidate);
  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="client-box"></div>
<div class="candidate-box"></div>
<input type="button" class="left-btn" value="Prev" />

<input type="button" class="right-btn" value="Next" />

Answer 2

要达到预期结果，请使用以下选项

问题： PrevItem 和 nextItem 方法在左右单击时被调用两次，这会导致轮播不一致

代码示例

let testimonials = [
  {client: "Raphel", candidate: "male"},
  {client: "Tom", candidate: "male"},
  {client: "Jerry", candidate: "male"},
  {client: "Dorry", candidate: "female"}
];



var i = 0;

$('.client-box').text(testimonials[0].client);
$('.candidate-box').text(testimonials[1].candidate); 

function nextItem() {
    i = i + 1;
  if (i === testimonials.length) {
        i = i % testimonials.length;
    } 
    return testimonials[i];
}

function prevItem() {
    if (i === 0) {
        i = testimonials.length;
    }
    i = i - 1;
  console.log("prev", i)
    return testimonials[i]; 
}

  $('.left-btn').on('click', function(e){
     let val = prevItem()
     $('.client-box').text(val.client);
      $('.candidate-box').text(val.candidate); 
  });
 
  $('.right-btn').on('click', function(e){
     let val = nextItem()
    $('.client-box').text(val.client);
      $('.candidate-box').text(val.candidate); 
  });

.testimonial-carousel {
  position: relative;
  width: 1000px;
}
.testimonial-carousel::after {
  content: "";
  display: block;
  clear: both;
}
.testimonial-carousel .testimonial-box {
  width: 500px;
  height: 100px;
  float: left;
  background: #999999;
}
.testimonial-carousel .testimonial-box.candidate-box {
  background: white;
  margin-top: 2rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
}
.testimonial-carousel .buttons {
  position: absolute;
  bottom: -60px;
  right: 20px;
}
.testimonial-carousel .buttons::after {
  content: "";
  display: block;
  clear: both;
}
.testimonial-carousel .buttons .btn {
  background: black;
  width: 60px;
  height: 60px;
  float: left;
  margin-right: 5px;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testimonial-carousel">
 <div class="testimonial-box client-box"></div>
 <div class="testimonial-box candidate-box"></div>
 <div class="buttons">
  <a href="#" class="btn left-btn">LEFT</a>
  <a href="#" class="btn right-btn">RIGHT</a>
 </div>
</div>

codepen - https://codepen.io/nagasai/pen/wLKoVv

循环遍历轮播中的数组数据不起作用

Loop through array data in carousel not working

javascript

arrays

jquery

carousel