递增数字时单击按钮时出现“未捕获的类型错误：无法读取未定义的属性‘名称’”

Question

问题

我有两个按钮 .btn-previous 和 btn-next。单击其中一个按钮可以从变量var currentNumber = 0, 中加一或减一。但是当用户一直点击到最后一个人的下一个或一直点击到数组中的第一个人时，我看到错误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>

Answer 1

在您更新 currentNumber 后运行检查，如果它在您的范围的末尾，则隐藏该按钮，否则更新该按钮的文本。

$(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() {

    currentNumber = currentNumber - 1;

    $(".btn-next").show();
    $(".controls__inner").css("justify-content", "flex-end");
    $(".player__info--name").html(players[currentNumber].name);
    $(".player__info--desc").html(players[currentNumber].description);
    // after you've decremented your index, check to see if you're at the beginning
    if (currentNumber == 0)
      // if you are, hide the previous button
      $(".btn-previous").hide();
    else {
      // if you aren't, update the previous button's text
      $(".btn-previous span").html(players[currentNumber - 1].name);
      // make sure the previous button is shown
      $(".btn-previous").show();
    }
    $(".btn-next span").html(players[currentNumber + 1].name);
  });

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

    $(".btn-previous").show();
    $(".player__info--name").html(players[currentNumber].name);
    $(".player__info--desc").html(players[currentNumber].description);
    $(".btn-previous span").html(players[currentNumber - 1].name);
    if (currentNumber == (players.length - 1))
      // if at the end of your list, hide the next button
      $(".btn-next").hide();
    else {
      // if not, show the next button and update its text
      $(".btn-next").show();
      $(".btn-next span").html(players[currentNumber + 1].name);
    }
    $(".controls__inner").css("justify-content", "flex-start");
  });


});


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"
  }
]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

添加了一些 cmets 来帮助解释。基本上，您想在更新当前索引后检查您是否处于范围的末尾。如果你在最后，隐藏相应的按钮，如果你不是在最后，显示那个按钮并更新它的内容。

Answer 2

发生错误是因为您在播放器索引 0 上显示 Prev 和 Next 按钮，这导致尝试获取 players[0 - 1] 对象。

最后一个下一步按钮也会发生同样的事情，它试图获取players[6 + 1]。

Answer 3

您正在尝试访问数组中不存在的索引。

一旦currentNumber + 1 的值大于6，players[ 7 ] 将是未定义的。因此，错误。

currentNumber - 1 的值小于 0 时相同。