Question

我有4个（或更多）DIV元素，我想在其中设置此行为：

首先，所有DIV都会显示 A
我点击一个随机的DIV。它必须显示 B 。其他DIV必须继续显示 A
如果在同一个DIV上执行连续点击，则后面的点击必须显示 A 。其他人必须继续显示 A 。
如果在不同的DIV上执行连续点击，则后面的点击必须显示 B 。所有其他DIV必须显示 A

这就是我正在做的事情。我很难做任何有用的事情。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    .divElt {
        margin-left: 20%;
        width: 80px;
        height: 40px;
        background-color: blue;
        color: white;
        font-weight: bold;
        text-align: center;
    }
  </style>
</head>
<body>

  <script>
    var data = 'B';
    function funct() {
        var elts = document.getElementsByClassName('divElt')
        for(var i = 0; i < elts.length; i++) {
            elts[i].innerHTML = data
        }
    }
  </script>

  <div class ='divElt' onclick = "funct()"> A
  </div>
  <br/>
  <div class ='divElt' onclick = "funct()"> A
  </div>
  <br/>
  <div class ='divElt' onclick = "funct()"> A
  </div>
  <br/>
  <div class ='divElt' onclick = "funct()"> A
  </div>  
</body>
</html>

请帮我解决这个问题，只能在JavaScript（没有jQuery或其他库）中解决。非常感谢你提前。

Answer 1

＆＃13;

<h3><br /><h3>

＆＃13;

var letterA = "A";
var letterB = 'B';

//Init with all "A"
var elts = document.getElementsByClassName('divElt');
for (var i = 0; i < elts.length; i++) {
  elts[i].innerHTML = letterA;
}


function funct(item) {
  for (var i = 0; i < elts.length; i++) {
    if (elts[i] !== item)
      elts[i].innerHTML = letterA;
    else
      elts[i].innerHTML = elts[i].innerHTML === letterA ? letterB : letterA;
  }
}

＆＃13;

.divElt {
  margin-left: 20%;
  width: 80px;
  height: 40px;
  background-color: blue;
  color: white;
  font-weight: bold;
  text-align: center;
}

＆＃13;

Answer 2

要唯一标识所点击的div，请将this传递给被调用的函数，如onclick=func(this)

然后在你的函数内部接收它作为参数

function func(elem) {
    var elts = document.getElementsByClassName('divElt');
    for(var i = 0; i < elts.length; i++) {
        elts[i].innerHTML = 'A';
    }
    elem.innerHTML = elem.innerHTML === 'B' ? 'A' : 'B';
}

切换DIV中显示的值，具体取决于执行单击的DIV

2 个答案: