在具有相同类 onclick 的多个 div 中更改文本 [关闭]

Posted 2023-05-07

【中文标题】在具有相同类 onclick 的多个 div 中更改文本 [关闭]

【英文标题】：Change text in multiple divs with same class onclick [closed]

【发布时间】：2018-07-08 05:11:34

【问题描述】：

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

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()，但我无法让脚本工作。

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

请使用this fiddle帮助我

【问题讨论】：

尝试获取所有元素并循环更改值，如下所示：` var allClassses = $(".match"); for (var i = 0; i

请告诉我们你已经尝试过什么js。

谢谢Calvin，但恐怕我对脚本的了解非常有限，我不知道该放什么。你介意将它添加到现有的小提琴中吗？

@Pete 我尝试了不同版本的 onclick="document.getElementById('score').innerHTML = 'Hello Dolly.';"与 jQuery 结合使用，但它仅适用于具有唯一 ID 的单个 div。

我们需要查看您当前的情况，以便缩小我们的回应范围，因为您的问题太宽泛了，因为有太多方法可以做您想做的事（正如您从所有不同的答案）。因此，它与网站无关。

【参考方案1】：

这是一个解决方案，它仅使用querySelector 选择button 和.table 元素来切换类。

剩下的都是 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 并显示其余部分根据需要。

【参考方案2】：

如果您不想更改 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>

【参考方案3】：

Here is a fiddle 使用普通的旧 javascript。

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

// Mandatory JS code 

【参考方案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“隐藏”，效果很好

【参考方案5】：

我推荐的解决方案是使用 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'));
);

【参考方案6】：

我的解决方案：

我会使用临时存储。你可以使用 data()-Method 为每个元素设置值

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

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