javascript - 替换 div (jQuery + Javascript)

Question

请参阅以下代码:

function replace() { document.getElementById("div1").style.display="none"; 
document.getElementById("div2").style.display="block"; 
}

<button onclick="replace();return false"/>Click to Replace</button>
<div id = "div1" style="display:block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum. </div>
<div id = "div2" style="display:none">Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus. </div> 

当您按下“单击替换”按钮时，我希望它将文本更改为“更改回来”之类的内容。换句话说，这将是一个可以不停地更改文本的循环。

如果有人能教我解决这个问题，我将不胜感激。

Answer 1

这是你的答案

$(document).ready(function(){
$('button').click(function() {
 if($(this).text()=="Click to Replace"){
   $(this).text("Change back");
 $('#div1').hide();
 $('#div2').show();
   }
  else{
    $(this).text("Click to Replace");
 $('#div1').show();
 $('#div2').hide();
    }
});
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<button/>Click to Replace</button>
<div id = "div1" style="display:block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum. </div>
<div id = "div2" style="display:none">Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus. </div>