Заменить 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>

При нажатии на кнопку 'Нажмите, чтобы заменить', я хочу, чтобы это изменить текст что-то вроде «Change назад». Другими словами, это будет цикл с возможностью изменения текста без остановки.

Если кто-то может научить меня решению, я был бы очень благодарен.

Answer 1

function replace(id) { 
 
if(id.innerHTML == "Click to Replace") 
 
{ 
 
    id.innerHTML = "Change back"; 
 
    document.getElementById("div1").style.display="none"; 
 
    document.getElementById("div2").style.display="block"; 
 
} 
 
else 
 
{ 
 
    id.innerHTML = "Click to Replace"; 
 
    document.getElementById("div2").style.display="none"; 
 
    document.getElementById("div1").style.display="block"; 
 
} 
 
}

@keyframes fadeIn { 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 
.fade-in { 
 
    opacity: 0; 
 
    animation: fadeIn .5s ease-in 1 forwards; 
 
}

<button onclick="replace(this);return false"/>Click to Replace</button> 
 
<div id = "div1" class="fadeIn fade-in" 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" class="fadeIn fade-in" 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 2

Вот ваш ответ

$(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>