Question

我正在尝试在JS中构建轮播，该轮播使用数组来存储我的数据。我希望左侧的框显示“客户端”的值，右侧的框显示“候选”的值。

尽管我认为这是正确的，但我似乎无法使其正常运行？

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

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

2 个答案: