Question

我正在尝试完成一项小任务。当用户点击其中一个框时，它应该将该框增加2，并将其旁边的框增加1.如果一个框左边有另一个框，它应该将该框增加1以及一个在右边。但是，虽然代码适用于页面上的所有框，但是当单击最后一个框时，它之前的框不会增加。以下是代码。

version: '3.2'

services:
  zoo1:
    image: zookeeper
    restart: always
    hostname: zoo1
    ports:
      - 2181:2181
    environment:
      ZOO_MY_ID: 1
      ZOO_SERVERS: server.1=0.0.0.0:2888:3888 server.2=zoo2:2888:3888 server.3=zoo3:2888:3888

  zoo2:
    image: zookeeper
    restart: always
    hostname: zoo2
    ports:
      - 2182:2181
    environment:
      ZOO_MY_ID: 2
      ZOO_SERVERS: server.1=zoo1:2888:3888 server.2=0.0.0.0:2888:3888 server.3=zoo3:2888:3888

  zoo3:
    image: zookeeper
    restart: always
    hostname: zoo3
    ports:
      - 2183:2181
    environment:
      ZOO_MY_ID: 3
      ZOO_SERVERS: server.1=zoo1:2888:3888 server.2=zoo2:2888:3888 server.3=0.0.0.0:2888:3888

function boxInc(element){

var number = parseInt(element.innerHTML);
number+=2;
element.innerHTML = number;


rightNumber = parseInt(element.nextElementSibling.innerHTML);
rightNumber++;
element.nextElementSibling.innerHTML = rightNumber;

leftNumber = parseInt(element.previousElementSibling.innerHTML);
leftNumber++;
element.previousElementSibling.innerHTML = leftNumber;

}

#container div {
  width: 5vw;
  height: 5vw;
  background: rgb(10,200,40);
  float: left;
  margin: 1vw;
  padding: 1vw;
  font-family: sans-serif;
  font-size: 20pt;
}

我想要一个普通的JavaScript解决方案而不是jQuery的解决方案。

Answer 1

你是正确的，正如 Randy Casburn 所述，你只需要在尝试获取或设置内容之前检查兄弟姐妹是否存在。

此外，我认为您可以使用textContent代替innerHTML，因为您只是设置文字，而不是使用HTML，因此不需要调用HTML＆＃34;编译器＆＃34;为了那个原因。下面的代码可以帮助您，看看：

＆＃13;

function boxInc(element){
  var number = parseInt(element.textContent);
  number += 2;
  element.textContent = number;

  if (element.nextElementSibling != null){
    rightNumber = parseInt(element.nextElementSibling.textContent);
    rightNumber++;
    element.nextElementSibling.textContent = rightNumber;
  }

  if (element.previousElementSibling != null){
    leftNumber = parseInt(element.previousElementSibling.textContent);
    leftNumber++;
    element.previousElementSibling.textContent = leftNumber;
  }

}

＆＃13;

#container div {
  width: 5vw;
  height: 5vw;
  background: rgb(10,200,40);
  float: left;
  margin: 1vw;
  padding: 1vw;
  font-family: sans-serif;
  font-size: 20pt;
}

＆＃13;

<div id="container">
  <div id="1" onclick="boxInc(this)">0</div>
  <div id="2" onClick="boxInc(this)">0</div>
  <div id="3" onClick="boxInc(this)">0</div>
  <div id="4" onClick="boxInc(this)">0</div>
  <div id="5" onClick="boxInc(this)">0</div>
  <div id="6" onClick="boxInc(this)">0</div>
</div>

＆＃13;

无法使用javascript中的前一个元素兄弟增加最后一个元素

1 个答案: