问题

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之后运行支票，如果它在您的范围的末尾，则隐藏该按钮，否则更新该按钮的文本。

＆＃13;

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

＆＃13;

<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>

＆＃13;

添加了一些评论以帮助解释。基本上，您想要在更新当前索引后检查是否在范围的末尾。如果您在最后，请隐藏相应的按钮，如果您不在最后，请显示该按钮并更新其内容。

Answer 2

发生错误是因为您在播放器索引0上导致尝试获取{时，您正在显示上一个和下一个按钮{1}}对象。

最后一个尝试获取players[0 - 1]的 Next 按钮也会发生同样的事情。

Answer 3

您正在尝试访问阵列中不存在的索引。

一旦sensible-browser http://google.com的值超过6，currentNumber + 1将不确定。因此，错误。

players[ 7 ]小于0的值相同。

＆＃34;未捕获的TypeError：无法读取属性＆＃39; name＆＃39;未定义＆＃34;在递增数字时单击按钮

问题

目的

这是问题的JSFiddle：

scripts.js中

的index.html

3 个答案: