Question

我尝试让JavaScript一次更改文本多次，然后返回原始文本。我可以更改文本，但不会自动更改为另一段文本，或者更改回原始文本。

因此，文本将来自＆＃34;原始文本＆＃34;到＆＃34;文本1＆＃34;到＆＃34;文本2＆＃34;到＆＃34;文本3＆＃34;对于我需要的多少，然后它会回到原始文本＆＃34;

他是我目前的代码

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

这里是html

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

非常感谢任何帮助。谢谢！

Answer 1

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

＆＃13;

function changeText(new_text) {  
  var original_text = document.getElementById('changingtext').innerHTML;
  document.getElementById('changingtext').innerHTML = new_text;
  setTimeout("changeText('"+original_text+"')",3000);
}

＆＃13;

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

＆＃13;

Answer 2

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

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>

Answer 3

这是一种方式。

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

Answer 4

您遇到的问题是您在点击和changeText上调用了函数timeout，该功能会在点击后和timeout之后更改文字您将文本设置为changeText函数中相同的硬编码值。

最好的解决方案是，因为IrkenInvader和Uzbekjon都已经回答（在撰写本文时），是为了向changeText函数添加一个参数以允许更多自定义。我的javascript会比两者略有不同，但这更像是一种偏好，而不是一种更好的解决方案本身，但是，我会发布我的javascript的另一个原因。重要的是你使用带有字符串的setTimeout，这与使用eval相同，并且由于许多原因这是一个很大的禁忌，如this article中所解释的那么多很多您可以在Google上轻松找到的其他

。

因此我推荐这种组合：

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，仍然可以将函数参数传递给func中指定的setTimeout，同时保留跨浏览器兼容性。通过IE 9，你也可以使用

setTimeout(changeText, 3000, original_text);

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

只需点击一下即可多次更改

4 个答案: