更新

Question

目前我有以下内容：

<div class="ArrowLeft"></div>
<div class="ArrowRight"></div>
<div class="ReviewComment">
<p>“Thank you for making selling our car so painless.”</p>
</div>
<div class="ReviewName">
</div>
</div>

我一直在寻找不同的方法让它发挥作用，以便点击其中一个箭头＆＃34;按钮，它取代了＆＃34; ReviewComment＆＃34;中的内容。但到目前为止，我只是设法让它以单向替换内容。例如，当它获得第5个div的内容时，它不会再点击回到第一个内容？

我尝试了多种不同的方法，但我似乎无法按照自己的意愿进行循环。

我似乎无法在ReviewComment的同时将其替换为ReviewName的内容。

Answer 1

跟踪您的评论以及评论的评论数量。如果总评论==当前评论，请返回第一个评论。例如：

var comments = ['comment 1', 'comment 2', 'comment 3', 'comment 4', 'comment 5'];
var currentComment = 0;
var totalComments = comments.length - 1;

$('.arrowRight').click(function(){
    currentComment++;

  if(currentComment > totalComments){
    // past last comment, load first
    $('.comments .comment').html(comments[0]);
    currentComment = 0;
  }else{
    $('.comments .comment').html(comments[currentComment]);
  }

    console.log(currentComment);
})

$('.arrowLeft').click(function(){
    currentComment--;

  if(currentComment < 0){
    // past first comment, load last
    $('.comments .comment').html(comments[totalComments]);
    currentComment = totalComments;
  }else{
    $('.comments .comment').html(comments[currentComment]);
  }

  console.log(currentComment);
})

T̶h̶i̶s̶̶c̶o̶d̶e̶̶a̶s̶̶i̶s̶̶w̶i̶l̶l̶̶n̶o̶t̶̶w̶o̶r̶k̶我不知道你是如何得到你的评论的。但是您可以将示例中的逻辑移植到您自己的代码中。希望这能让你顺利上路。

我会尽快用js小提琴编辑。

更新

在这里工作小提琴：https://jsfiddle.net/mpr9j6sd/

用其他内容替换多个div内容并能够循环

1 个答案:

更新