使用相同的 class onclick 更改多个 div 中的文本

Question

我有一份足球比赛列表，想用“?-?”替换所有比分。当按下一个按钮时，再次按下时切换回显示分数。

div {
  display: table;
}

div div {
  display: table-row;
}

div div div {
  display: table-cell;
}

.score {
  color: blue;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hide scores!</button>
<br>  <br>
<div class="table">

  <div class="match">
    <div class="team1">Manchester United</div>
    <div class="score">1-1</div>
    <div class="team2">Liverpool</div>
  </div>

  <div class="match">
    <div class="team1">Juventus</div>
    <div class="score">2-0</div>
    <div class="team2">Inter Milan</div>
  </div>

  <div class="match">
    <div class="team1">Real Madrid</div>
    <div class="score">1-4</div>
    <div class="team2">Barcelona</div>
  </div>

  <div class="match">
    <div class="team1">Dortmund</div>
    <div class="score">3-0</div>
    <div class="team2">Bayern Munich</div>
  </div>

  <div class="match">
    <div class="team1">PSG</div>
    <div class="score">0-1</div>
    <div class="team2">Marseille</div>
  </div>

</div>

我尝试过使用 getElementById 和 innerHTML，但由于匹配项较多，我更愿意改用 getElementsByClassName。我见过有人为此推荐 querySelectorAll()，但我无法让脚本运行。

另一种方法是运行一个脚本，用相同的 class 将 div 中的所有数字替换为问号。

请使用 this fiddle

帮助我

Answer 1

我建议的解决方案是使用 div 上的数据属性来存储分数。即 <div class="score" data-for="1" data-against="1">1-1</div>。然后更容易切换值。由于您使用的是 jQuery、

// Set the values to ?-?
$('.match .score').html('?-?');

// set the actual scores
$('.match .score').each(function(){
  $(this).html($(this).data('for') + '-' + $(this).data('against'));
});

Answer 2

这是一个仅使用 querySelector 到 select、button 和 .table 元素来切换 class 的解决方案。

剩下的就是CSS，不用循环了

请注意，这会将您的 .score 文本内容替换为 data-score 属性。

document.querySelector("button")
  .addEventListener("click", function() {
    document.querySelector("div.table").classList.toggle("hide-score");
  });

.table .score:after {
  content: attr(data-score);
}

.table.hide-score .score:after {
  content: "?-?";
}

<button>Hide scores!</button>

<br>
<br>

<div class="table">

  <div class="match">
    <div class="team1">Manchester United</div>
    <div class="score" data-score="1-1"></div>
    <div class="team2">Liverpool</div>
  </div>

  <div class="match">
    <div class="team1">Juventus</div>
    <div class="score" data-score="2-0"></div>
    <div class="team2">Inter Milan</div>
  </div>

  <div class="match">
    <div class="team1">Real Madrid</div>
    <div class="score" data-score="1-4"></div>
    <div class="team2">Barcelona</div>
  </div>

  <div class="match">
    <div class="team1">Dortmund</div>
    <div class="score" data-score="3-0"></div>
    <div class="team2">Bayern Munich</div>
  </div>

  <div class="match">
    <div class="team1">PSG</div>
    <div class="score" data-score="0-1"></div>
    <div class="team2">Marseille</div>
  </div>

</div>

为了支持旧版浏览器，您可以将乐谱保留为文本内容，但将其放在 span 中，旁边还有另一个 <span>?-?</span>，然后配置 CSS隐藏 :first-child 并根据需要显示其余部分。

Answer 3

Here is a fiddle 与普通旧 Javascript。

但我不得不承认，@SkinnyPete 的方法更好也更容易理解！如果你只是为了隐藏分数，你应该使用它。这是最好的方法。

// Mandatory JS code

Answer 4

const score = document.getElementsByClassName('score')
const button = document.getElementById("hide")
const initialState = []

for(let i = 0; i < score.length; i++){
    initialState.push({initial : score[i].innerHTML})
}

button.addEventListener('click', (e) => {
  const dynamicScore = document.getElementsByClassName('score')
  for(let i = 0; i < dynamicScore.length; i++){
     if(dynamicScore[i].innerText === initialState[i].initial){
        dynamicScore[i].innerHTML = "?-?"
     }else{
        dynamicScore[i].innerHTML = initialState[i].initial
     }
  }
})

我给你的按钮添加了一个 id "hide" 这很好用

Answer 5

我的解决方案：

我会使用临时存储空间。您可以使用 data()-Method

设置每个元素的值

//STORE DATA IN TEMP STORAGE
$( ".score" ).each(function( index ) {
    $(this).data("score-temp", $(this).text());
});

在 Click-Event 上我会添加一个 class "hide-score" 来区分这两种状态。如果 hide-score 已经设置，那么你从临时存储中重置值

$("button").click(function() {
   if ($(".table").hasClass( "hide-score" )) {
     $(".table").removeClass("hide-score");

     //set VALUE FROM TEMP STORAGE
     $( ".score" ).each(function( index ) {
        var score_temp = $(this).data("score-temp" );
        $(this).text(score_temp);
     });  
  }
 else {
   $( ".score" ).text("?-?");   
   $(".table").addClass("hide-score");
 }
});

Answer 6

如果您不想更改 html 代码

$.each($('.score'), function(key, score) {
  var score_text = $(score).text();
  $(score).data('score', score_text)
})

$('button').click(function() {
 if ($(this).data('hiding-score')) {
   $(this).data('hiding-score', false);
    $.each($('.score'), function () {
      $(this).text($(this).data('score'));
    });
  } else {
    $(this).data('hiding-score', true);
    $('.score').text('?-?');
  }
})

div { display:table; }
div div { display:table-row; }
div div div  { display:table-cell; }
.score { color:blue; padding:10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hide scores!</button>

<br>
<br>

<div class="table">

<div class="match">
<div class="team1">Manchester United</div>
<div class="score">1-1</div>
<div class="team2">Liverpool</div>
</div>

<div class="match">
<div class="team1">Juventus</div>
<div class="score">2-0</div>
<div class="team2">Inter Milan</div>
</div>

<div class="match">
<div class="team1">Real Madrid</div>
<div class="score">1-4</div>
<div class="team2">Barcelona</div>
</div>

<div class="match">
<div class="team1">Dortmund</div>
<div class="score">3-0</div>
<div class="team2">Bayern Munich</div>
</div>

<div class="match">
<div class="team1">PSG</div>
<div class="score">0-1</div>
<div class="team2">Marseille</div>
</div>

</div>

使用相同的 class onclick 更改多个 div 中的文本

Change text in multiple divs with same class onclick

html

javascript

css

jquery

innerhtml