4 개의 카드가 있고 클릭시 해당 요소의 텍스트를 변경하고 싶습니다. 아래는 내 html입니다.
<tr>
<td class="card">down</td>
<td class="card">down</td>
</tr>
<tr>
<td class="card">down</td>
<td class="card">down</td>
</tr>
따라서 카드를 클릭하면 텍스트가 위쪽에 있고 다른 카드는 아래쪽에 있어야합니다. 클릭 한 카드의 텍스트를 변경할 수 있지만 다른 카드 값을 다시 낮추려면 어떻게해야합니까? 아래는 내 JS
var cards = document.getElementsByClassName('card');
for (var i = 0; i < cards.length; i++) {
cards[i].onclick = function(target) {
this.innerHTML = 'up';
}
}
다음과 같이 할 수 있습니다.
var cards = document.getElementsByClassName('card');
for (var i = 0; i < cards.length; i++) {
cards[i].onclick = function(target) {
// Turn the 'cards' into an array and loop over it.
[].forEach.call(cards, function(card) {
card.innerHTML = "down"
});
this.innerHTML = "up";
}
}
이것은 모든 카드를 반복하고 그 값을로 반환합니다 "down".
아래 데모
var cards = document.getElementsByClassName('card');
for (var i = 0; i < cards.length; i++) {
cards[i].onclick = function(target) {
[].forEach.call(cards, function(card) {
card.innerHTML = "down"
});
this.innerHTML = "up";
}
}<table>
<tr>
<td class="card">down</td>
<td class="card">down</td>
</tr>
<tr>
<td class="card">down</td>
<td class="card">down</td>
</tr>
</table>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다