使用javascript匹配innerHTML内容

时间：2016-07-18 16:12:52

标签： javascript html

我正在制作卡片匹配游戏。当我点击框时，我将它设置为将bg颜色更改为绿色。如何查看第二张卡片的内容（也会变为绿色），如果匹配，请将它们隐藏起来？

        <style type="text/css">
        .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;
             }
    </style>
</head>
<body>
    <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>


    <script type="text/javascript">   
       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";
           }

3 个答案:

答案 0 :(得分：1)

没有jquery，只是纯粹的JS

首先我们迭代并

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

回拨FN

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

首先this提供对交互元素的引用。

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

尝试类似的东西：

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的背景颜色重置为黑色。

我希望它有所帮助;）

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

答案 2 :(得分：0)

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

另外，我使用jquery轻松。

＆＃13;
＆＃13; 
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);
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题