问题

我有两个按钮 .btn-previous 和 btn-next 。单击其中一个按钮会为变量 var currentNumber = 0, 加一或减一。但是，当用户单击 next 一直到最后一个人或单击 previous 一直到数组中的第一个人时，我会看到错误 Uncaught TypeError: Cannot read property 'name' of undefined

我尝试过：

• 切换 if 语句中的比较运算符
• 隔离可能导致问题的 if 语句部分，

$(".btn-previous span").html(players[currentNumber - 1].name); $(".btn-next span").html(players[currentNumber + 1].name);

目标

• 单击下一个或上一个按钮时，更改名称、描述和按钮文本，其中包含数组中下一个和上一个人员的姓名
• 如果用户位于数组末尾，则隐藏下一个按钮，显示上一个
• 如果他们位于数组开头，则隐藏上一个按钮，显示下一个

这是问题的 JSFiddle：

https://jsfiddle.net/6xm96vw9/16/

scripts.js

$(function(){

  var currentNumber = 0;

    // Key players
    // Sets the default values as the first key player
    $(".player__info--name").html(players[currentNumber].name);
    $(".player__info--desc").html(players[currentNumber].description);
    $(".btn-next span").html(players[currentNumber + 1].name);

    if (currentNumber <= 0) {
      $(".btn-previous").hide();
      $(".controls__inner").css("justify-content", "flex-end");
    } else {
      $(".btn-previous").show();
      $(".controls__inner").css("justify-content", "space-between");
    }

    // When a person clicks on the previous button
    $(".btn-previous").on("click", function() {

      if (currentNumber > 0) {
        currentNumber = currentNumber - 1;

        $(".btn-previous").show();
        $(".btn-next").show();
        $(".controls__inner").css("justify-content", "flex-end");
        $(".player__info--name").html(players[currentNumber].name);
        $(".player__info--desc").html(players[currentNumber].description);
        $(".btn-previous span").html(players[currentNumber - 1].name);
        $(".btn-next span").html(players[currentNumber + 1].name);
      } else {
        $(".btn-previous").hide();
        $(".btn-next").show();
        $(".controls__inner").css("justify-content", "space-between");
      }
    });

    // When a person clicks on the next button
    $(".btn-next").on("click", function() {


      // It's six because it's zero-indexed
      if (currentNumber < 6 ) {
        currentNumber = currentNumber + 1;
        console.log(currentNumber);

        $(".player__info--name").html(players[currentNumber].name);
        $(".player__info--desc").html(players[currentNumber].description);
        $(".btn-previous span").html(players[currentNumber - 1].name);
        $(".btn-next span").html(players[currentNumber + 1].name);

        $(".btn-previous").show();
        $(".btn-next").show();
        $(".controls__inner").css("justify-content", "flex-start");
      } else {
        $(".btn-previous").show();
        $(".btn-next").hide();
        $(".controls__inner").css("justify-content", "space-between");
      }
    });


  });


var players = [
  {
    "id": 1,
    "name": "name1",
    "description": "description1"
  },
  {
    "id": 2,
    "name": "name2",
    "description": "description2"
  },
  {
    "id": 3,
    "name": "name3",
    "description": "description3"
  },
  {
    "id": 4,
    "name": "name4",
    "description": "description4"
  },
  {
    "id": 5,
    "name": "name5",
    "description": "description5"
  },
  {
    "id": 6,
    "name": "name6",
    "description": "description6"
  },
  {
    "id": 7,
    "name": "name7",
    "description": "description7"
  }
]

index.html

<div class="player__info">
    <div class="player__info--inner-group">
        <div class="player__image--wrapper">
            <div class="player__image"></div>
        </div> <!-- player__image--wrapper -->

        <div class="player__info--inner">
            <p class="player__info--header">Key Players</p>
            <p class="player__info--name">tk-name</p>

            <div class="player__info--group">
                <p class="player__info--desc"></p>
            </div>
        </div> <!-- player__info--inner -->
    </div> <!-- player__info--inner-group -->
</div> <!-- player__info -->

<div class="controls">
    <div class="controls__inner">
        <button class="btn btn-previous">Previous: <span class="is-bold">tk-name</span></button>
        <button class="btn btn-next">Next: <span class="is-bold">tk-name</span></button>
    </div>
</div>