单击即可进行多次更改

Make change multiple times on a single click

本文关键字：单击      更新时间：2023-09-26

我试图让JavaScript在一次点击中多次更改文本，然后返回原始文本。我可以更改文本，但不能自动更改为另一段文本，也不能更改回原始文本。

因此，文本将从"原始文本"到"文本1"再到"文本2"再到到"文本3"等，根据我的需要，然后返回到"原始文本"

他是我目前掌握的代码

function changeText() { 
    document.getElementById('changingtext').innerHTML = 'text 1';
    setTimeout("changeText()",3000);
}

这是html

<p id="changingtext" onclick="changeText()">original text</p>

如有任何帮助，我们将不胜感激。谢谢

如果您不介意将参数传递给函数：

function changeText(new_text) {  
  var original_text = document.getElementById('changingtext').innerHTML;
  document.getElementById('changingtext').innerHTML = new_text;
  setTimeout("changeText('"+original_text+"')",3000);
}
<p id="changingtext" onclick="changeText('text 1')">original text</p>

这里有一种方法。

var originalText,
    messages = ['text 1', 'text 2', 'text 3'],
    currentItem = 0;
function changeText() {  
  // capture the original text 
  originalText = originalText || document.getElementById('changingtext').innerHTML;
  // get element 
  var elem = document.getElementById('changingtext');
  // Check if we hit the last message
  // if so, go back to original and stop 
  if (currentItem >= messages.length) {
      elem.innerHTML = originalText;
  } else {
      elem.innerHTML = messages[currentItem++];
      setTimeout("changeText()", 3000);
  }
}
<p id="changingtext" onclick="changeText()">original text</p>

此解决方案使用文本数组进行循环，将原始文本添加为该数组中的最后一项。

Fiddle

Javascript

var changeTexts = ['text 1','text 2','text 3','text 4','text 5'];
function changeText(index) {     
  var element = document.getElementById('changingtext');
  if(index >= changeTexts.length){
    changeTexts.splice(-1,1);
    return;
  }
  if(index === 0) changeTexts.push(element.innerHTML);   
  element.innerHTML = changeTexts[index];
  index++;
  setTimeout(function(){ changeText(index); },1000);    
}

HTML

<p id="changingtext" onclick="changeText(0)">original text</p>

您遇到的问题是，您在单击和timeout时都调用函数changeText，而该函数会更改文本，因此在单击和单击timeout后，您在changeText函数中将文本设置为相同的硬编码值。

最好的解决方案是，正如IrkenInvader和Uzbekhon（在撰写本文时）已经回答的那样，在changeText函数中添加一个参数，以便进行更多的自定义。我的javascript与两者略有不同，但这更像是一种偏好，而不是更好的解决方案本身，然而，我将发布我的javascript还有另一个原因。问题是，您使用带字符串的setTimeout，这与使用eval相同，这是一个很大的禁忌，原因有很多，正如本文所解释的，以及您可以在谷歌上轻松找到的许多许多其他原因。

出于这个原因，我推荐这种组合：

function changeText(new_text) {
  var original_text = document.getElementById('changingtext').innerHTML;
  document.getElementById('changingtext').innerHTML = new_text;
  if (original_text != new_text) {
    setTimeout(changeText.bind(this, original_text), 3000);
  }
}
<p id="changingtext" onclick="changeText('text 1')">original text</p>

您可以在这里看到，使用了function.bind，并将其作为第一个参数传递。这将跳过使用eval，并且仍然能够将函数参数传递到setTimeout中指定的func，同时保持跨浏览器兼容性。过去的IE 9，你也可以使用

setTimeout(changeText, 3000, original_text);

所以，如果你不需要IE 9或更低版本，那就干净多了。

相关文章：