Соответствие innerHTML Содержание с помощью javascript

Я делаю карточку, соответствующую игре. Я установил для изменения цвета bg на зеленый, когда я нажимаю на поле. Как мне проверить содержимое второй карты (которая также станет зеленой), и если они совпадают, сделать их невидимыми?Соответствие innerHTML Содержание с помощью javascript

 <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"; 
      }

источник

2016-07-18 Kurt Schoenhoft

Это потребует, чтобы вы сохранили то, что было нажато первым, и сравните это значение с тем, что было нажато вторым. – epascarello

** Как я могу проверить содержимое второй карты **, что это значит? – brk

@ kurt вы имеете в виду, при первом нажатии у них будет зеленый фон, а при втором нажатии они станут невидимыми. Правильно? – Ayan

Это казалось забавным, я придумал это, чтобы вы начали. У вас все еще есть логика, чтобы понять, я всегда храню последний щелкнул, где, я думаю, вы хотите сбросить неправильный выбор.

Кроме того, я использовал 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>

источник

2016-07-18 16:33:52 dmoo

Нет JQuery, просто чистый JS

Сначала мы итерацию и

boxes[i].style.backgroundColor = "black"; Назначают цвет Б.Г. черный.
boxes[i].onclick = clickFN; и приложите функцию обратного вызова.

Обратный вызов FN

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

Первый this дает ссылку на взаимодействовали элемента.

Проверьте, существует ли какой-либо lastClickedElem. lastClickedElem && elem === lastClickedElem
Если существует, и его один и тот же элемент скрывает его. style.visibility = 'hidden';
Устанавливает цвет bg на зеленый.
Обновить переменную 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>

источник

2016-07-18 16:35:02 Ayan

Пожалуйста, объясните. – Adjit

Эй @ Адджит, пожалуйста, проверьте. Добавили некоторые объяснения. – Ayan

эй @kurt дайте мне знать, если это был тот, который вы искали, или у нас могут быть улучшения! – Ayan

Попробуйте что-то вроде этого:

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

источник

2016-07-18 16:47:11

Я чувствую, что вы закончили всю домашнюю работу! – dmoo

Я не менял много чего ... Но да, возможно, я закончил домашнюю работу ...: p Однако я все объяснил, поэтому, если он хочет понять ... ^^ –

Соответствие innerHTML Содержание с помощью javascript

ответ

Смежные вопросы