使用javascript匹配innerHTML内容

试试这样的东西：

var boxes = document.getElementsByClassName('box');
// remeber the last box clicked
var _lastClicked = null;
for (var i=0; i< boxes.length; i++){
  boxes[i].style.backgroundColor = "black";
  boxes[i].addEventListener('click', onBox_click);
}
function onBox_click(domEvent){
  // clicked element
  var clicked = domEvent.target;
  
  // prevent clicking on the same element
  if (_lastClicked && _lastClicked === clicked)
    return;
  
  // if there is a box clicked and if the value match
  if (_lastClicked && clicked.innerHTML === _lastClicked.innerHTML){
    // the two boxes should disappear and we reset last clicked
    _lastClicked.style.opacity = 0;
    clicked.style.opacity = 0;
    _lastClicked = null;
  }
  
  // if there is a box clicked and if the value does not match 
  if (_lastClicked && clicked.innerHTML !== _lastClicked.innerHTML){
    // reset the color of the last clicked to black
    _lastClicked.style.backgroundColor = "black";
  }
  
  _lastClicked = clicked;
  clicked.style.backgroundColor = "green";
}

.box {
  background-color: black;
  width: 100px;
  height: 100px;
  margin: 10px;
  line-height: 100px;
  color:white;
  font-size: 48;
  font-family: helvetica;
  text-align: center;
  display: inline-block;
}

<div class="box">Bacon</div>
<div class="box">Waffle</div>
<div class="box">Toast</div> <br>
<div class="box">Coffee</div>
<div class="box">Eggs</div>
<div class="box">Oatmeal</div> <br>
<div class="box">Eggs</div>
<div class="box">Toast</div>
<div class="box">pancakes</div><br>
<div class="box">Waffle</div>
<div class="box">Oatmeal</div>
<div class="box">Bacon</div><br>

我去掉了你所有无用的代码行来听点击框。它现在更容易使用了。

基本上，我只记得_lastClicked变量中最后单击的框，并将其与新单击的框进行比较。如果匹配，我会使它们消失，并重置_lastClicked变量。如果不匹配，我将_lastClicked的背景色重置为黑色。

我希望它能有所帮助；）

附言：我还确保点击的元素与以前不同。如果不这样做，在同一个元素上单击两次将使其消失：p

没有jquery，只有纯JS

首先我们迭代和

• boxes[i].style.backgroundColor = "black";将bg颜色指定为黑色
• CCD_ 2并附加回调函数

回叫FN

function clickFN() {
  var elem = this,
    style = elem.style;
  if (lastClickedElem && elem === lastClickedElem) {
    style.visibility = 'hidden';
  }
  style.backgroundColor = "green";
  lastClickedElem = elem;
}

第一个CCD_ 3给出了对交互元素的引用。

• 检查是否存在任何lastClickedElem。lastClickedElem && elem === lastClickedElem
• 如果存在，则同一元素将其隐藏。style.visibility = 'hidden';
• 将背景颜色设置为绿色
• 更新lastClickedElem变量

var boxes = document.getElementsByClassName('box'),
  lastClickedElem;
for (var i = 0; i < boxes.length; i++) {
  boxes[i].style.backgroundColor = "black";
  // attach the callback for the click interaction.
  boxes[i].onclick = clickFN;
}
// callback function for the click event.
function clickFN() {
  var elem = this,
    style = elem.style;
  if (lastClickedElem && elem === lastClickedElem) {
    style.visibility = 'hidden';
  }
  style.backgroundColor = "green";
  lastClickedElem = elem;
}

.box {
  background-color: black;
  width: 100px;
  height: 100px;
  margin: 10px;
  line-height: 100px;
  color: white;
  font-size: 48;
  font-family: helvetica;
  text-align: center;
  display: inline-block;
}

<div class="box">Bacon</div>
<div class="box">Waffle</div>
<div class="box">Toast</div>
<br>
<div class="box">Coffee</div>
<div class="box">Eggs</div>
<div class="box">Oatmeal</div>
<br>
<div class="box">Eggs</div>
<div class="box">Toast</div>
<div class="box">pancakes</div>
<br>
<div class="box">Waffle</div>
<div class="box">Oatmeal</div>
<div class="box">Bacon</div>
<br>

这看起来很有趣，我想出这个是为了让你开始。你还有一些逻辑需要弄清楚，我总是把最后一个点击的存储在那里，我想你想在错误的选择时重置。

此外，为了方便起见，我使用了jquery。

var boxes = document.getElementsByClassName('box');
            for (var i=0; i< boxes.length; i++){
                boxes[i].style.backgroundColor = "black";
            }
           boxes[0].onclick = function(){
                boxes[0].style.backgroundColor = "green";    
           }
       boxes[1].onclick = function(){
                boxes[1].style.backgroundColor = "green";
           }
           boxes[2].onclick = function(){
                boxes[2].style.backgroundColor = "green";
           }
            boxes[3].onclick = function(){
                boxes[3].style.backgroundColor = "green";
           }
            boxes[4].onclick = function(){
                boxes[4].style.backgroundColor = "green";
           }
            boxes[5].onclick = function(){
                boxes[5].style.backgroundColor = "green";
           }
            boxes[6].onclick = function(){
                boxes[6].style.backgroundColor = "green";
           }
            boxes[7].onclick = function(){
                boxes[7].style.backgroundColor = "green";
           }
           boxes[8].onclick = function(){
                boxes[8].style.backgroundColor = "green";
           }
            boxes[9].onclick = function(){
                boxes[9].style.backgroundColor = "green";
           }
            boxes[10].onclick = function(){
                boxes[10].style.backgroundColor = "green";
           }
            boxes[11].onclick = function(){
                boxes[11].style.backgroundColor = "green";
           }
          
var lastSelected;
$('.box').click(function(){
   if(lastSelected && $(lastSelected).text() === $(this).text()){
     console.log('Match')
     $(lastSelected).addClass('hidden');
     $(this).addClass('hidden');
   }
  lastSelected = $(this);
});

.box {
                background-color: black;
                width: 100px;
                height: 100px;
                margin: 10px;
                line-height: 100px;
                color:white;
                font-size: 48;
                font-family: helvetica;
                text-align: center;
                display: inline-block;
             }
.hidden{
      visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">Bacon</div>
    <div class="box">Waffle</div>
    <div class="box">Toast</div> <br>
    <div class="box">Coffee</div>
    <div class="box">Eggs</div>
    <div class="box">Oatmeal</div> <br>
    <div class="box">Eggs</div>
    <div class="box">Toast</div>
    <div class="box">pancakes</div><br>
    <div class="box">Waffle</div>
    <div class="box">Oatmeal</div>
    <div class="box">Bacon</div><br>