强制第一项在数组拼接中显示 onclick

Question

我已经设法用我有限的 js 技能（我的数组拼接工作）和这里的一些帮助（prev-next nav）拼凑了这个。

我遇到的问题是新调用的数组中的第一项没有立即显示 onclick。您必须先 select category/subject（动物、车辆等），然后然后单击其中一个导航箭头。

<head>
  <style>
    [onclick] {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="box">fruits</div>
  <button type="button" onclick="prev()">&#11207;</button>
  <button type="button" onclick="next()">&#11208;</button>

  <script>
    var fruits = ["apple", "banana", "orange"];
    var vehicles = ["car", "bus", "truck"];
    var body = ["eye", "ear", "nose"];
    var animals = ["lion", "tiger", "elephant"];

    var box = document.getElementById('box');
    var i = -1;

    function next() {
      i = i >= fruits.length - 1 ? 0 : i + 1;
      box.innerHTML = fruits[i];
    }

    function prev() {
      i = i > 0 ? i - 1 : fruits.length - 1;
      box.innerHTML = fruits[i];
    }
  </script>

  <script>
    function veh() {
      fruits = vehicles.slice(0);
    }

    function bod() {
      fruits = body.slice(0);
    }

    function ani() {
      fruits = animals.slice(0);
    }
  </script>
  <br/>
  <p onclick="veh()">vehicles</p>
  <p onclick="bod()">body</p>
  <p onclick="ani()">animals</p>
</body>

Answer 1

这是完全正常的。更改 fruits 变量不会自动导致 DOM 更新。你必须为此编写代码。

在这种情况下，您需要设置box.innerHTML。因此，例如，在您的 veh 事件处理程序中，您可以编写 box.innerHTML = vehicles[0]，前提是您要显示数组中的第一项。

function veh() {
  fruits = vehicles.slice(0);
  box.innerHTML = vehicles[0];
}

您遇到的问题叫做“数据绑定”，是前端开发的经典问题。

Answer 2

您可以自动使用函数 next() 选择数组

function veh() {
  fruits = vehicles.slice(0);
  next()
}

<head>
  <style>
    [onclick] {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="box">fruits</div>
  <button type="button" onclick="prev()">&#11207;</button>
  <button type="button" onclick="next()">&#11208;</button>

  <script>
    var fruits = ["apple", "banana", "orange"];
    var vehicles = ["car", "bus", "truck"];
    var body = ["eye", "ear", "nose"];
    var animals = ["lion", "tiger", "elephant"];

    var box = document.getElementById('box');
    var i = -1;

    function next() {
      i = i >= fruits.length - 1 ? 0 : i + 1;
      box.innerHTML = fruits[i];
    }

    function prev() {
      i = i > 0 ? i - 1 : fruits.length - 1;
      box.innerHTML = fruits[i];
    }
  </script>

  <script>
    function veh() {
      fruits = vehicles.slice(0);
      next()
    }

    function bod() {
      fruits = body.slice(0);
      next()
    }

    function ani() {
      fruits = animals.slice(0);
      next()
    }
  </script>
  <br/>
  <p onclick="veh()">vehicles</p>
  <p onclick="bod()">body</p>
  <p onclick="ani()">animals</p>
</body>

Answer 3

我认为这是 DOM 的行为，因为当您将变量直接更改为 javascript 时，DOM 页面不会自动更改。

如果您还想更改 html，您还应该将 box.innerHTML = fruits[0]; 放在 veh() bod() 和 ani() 函数的下方。所以它看起来像这样。

function bod() {
  fruits = vehicles.slice(0);
  box.innerHTML = fruits[0];
}

强制第一项在数组拼接中显示 onclick

Force first item to show onclick in an Array splice

javascript

arrays

splice