Javascript 使用同一类onclick更改多个div中的文本

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

div{
显示：表格；
}
div div{
显示：表格行；
}
div div div div{
显示：表格单元格；
}
.得分{
颜色：蓝色；
填充：10px；
}

隐藏分数！



曼彻斯特联队
1-1
利物浦
尤文图斯
2-0
国际米兰
皇家马德里
1-4
巴塞罗那
多特蒙德
3-0
拜仁慕尼黑
PSG
0-1
马赛

我建议的解决方案是使用div上的数据属性来存储分数。i、 e.

1-1

。这样更容易切换值。因为您使用的是jQuery

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

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

---

这里有一个解决方案，它只使用

querySelector

来选择

按钮

和

.table

元素来切换类

其余的都是CSS，因此不需要循环

请注意，这会将

.score

文本内容交换为

数据分数

属性

document.querySelector（“按钮”）
.addEventListener（“单击”，函数（）{
document.querySelector（“div.table”）.classList.toggle（“隐藏分数”）；
});
.table.score:之后{
内容：attr（数据评分）；
}
.table.hide-score.分数：之后{
内容：“？-？”；
}
隐藏分数！




曼彻斯特联队
利物浦
尤文图斯
国际米兰
皇家马德里
巴塞罗那
多特蒙德
拜仁慕尼黑
PSG
马赛
使用普通的旧Javascript

但我必须承认，@Skinnypette的方式更好、更容易理解！如果你只是为了隐藏分数，就应该使用它。这是最好的办法

// Mandatory JS code 

const score=document.getElementsByClassName（'score'））
const button=document.getElementById（“隐藏”）
常量initialState=[]
for（设i=0；i{
常量dynamiccore=document.getElementsByClassName（'score'））
for（设i=0；i

我在你的按钮上添加了一个id“hide”（隐藏），这很好
我的解决方案：

我会使用临时存储。U可以使用data（）-方法设置每个元素的值

单击事件时，我会添加一个类“hiddescore”来区分这两种状态。如果已经设置了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");
 }
});

如果不想更改html代码


$。每个（$（'.score'），函数（键，分数）{
var score_text=$（score）.text（）；
$（分数）。数据（'分数'，分数\文本）
})
$（“按钮”）。单击（函数（）{
if（$（this）.data（'hiding-score'））{
$（this）.data（'hiding-score'，false）；
$.each（$（'.score'），函数（）{
$（this.text（$（this.data（'score'））；
});
}否则{
$（this）.data（'hiding-score'，true）；
$（'.score'）。文本（'？-？'）；
}
})
div{display:table；}
div div{显示：表行；}
div div{display:表格单元格；}
.score{颜色：蓝色；填充：10px；}

隐藏分数！




曼彻斯特联队
1-1
利物浦
尤文图斯
2-0
国际米兰
皇家马德里
1-4
巴塞罗那
多特蒙德
3-0
拜仁慕尼黑
PSG
0-1
马赛
尝试获取所有元素，并执行一个循环来更改值，如下所示：`var allClassses=$（“.match”）；对于（var i=0；i//STORE DATA IN TEMP STORAGE
$( ".score" ).each(function( index ) {
    $(this).data("score-temp", $(this).text());
});

$("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");
 }
});