javascript - JAVASCRIPT 循环遍历一个 jquery 数组并向当前项目添加一个类，同时在下一次从前一个项目中删除该类

Question

我正在尝试在纸牌游戏中创建某种 tabSelect 功能，玩家可以在其中选择手中的 5 张牌中的 1 张。我创建了一个高亮类并将其添加到包含卡片图像的 div 中，因此轮廓从蓝色变为浅蓝色。所以在循环中，类应该被添加到第一个 div，然后是第二个 div，同时从第一个 div 中删除它，然后是第三个 div，同时从第二个 div 中删除它......等等。

这是我迄今为止尝试过的，但它没有按预期工作：

selectCard() {
    const $playerOneHand = $('.pOne')
    for (i = 0; i < $playerOneHand.length; i++) {
        if ($($playerOneHand[i - 1]).hasClass('highlight') == true) {
            $($playerOneHand[i - 1]).removeClass('highlight')
        }
        if ($($playerOneHand[i]).hasClass('highlight') == false) {
            $($playerOneHand[i]).addClass('highlight')
            return
        } 
    }
}

标签： javascriptjquery

Answer 1

获取当前突出显示的卡片的索引。增加该索引以获得在其位置突出显示的索引。

function selectCard() {
  var index = $(".pOne.highlight").index(".pOne");
  index = (index + 1) % $(".pOne").length; // increment and wrap around
  $(".pOne").removeClass("highlight");
  $(".pOne").eq(index).addClass("highlight");
}

$("#next").click(selectCard);

.pOne {
  height: 30px;
  width: 30px;
  background-color: yellow;
}

.pOne.highlight {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pOne highlight">1</div>
<div class="pOne">2</div>
<div class="pOne">3</div>
<div class="pOne">4</div>
<div class="pOne">5</div>

<button id="next">Next Card</button>