Удалите добавленный элемент и добавьте новый добавленный элемент

Question

Итак, я ищу, чтобы щелкнуть ссылку, изменить текст, а затем, когда вы нажмете ее снова, она изменится. Я делаю это, добавляя текст, который я хочу. Тем не менее, я не могу изменить текст обратно к оригиналу. Это то, что у меня есть до сих пор ... любая помощь будет высоко оценена.

HTML

<a class="link" href=""> 
    <span class="icon icon-chat"></span> 
    <span>Link</span> 
</a> 

JS

$('.link').click(function(e) { 
    e.preventDefault(); 

    var $linkClicked = $('<span>Link Clicked</span>'); 

    $(this).toggleClass('active').append($linkClean).find('span').first().remove(); 

    $linkClicked.on('click', function() { 
     $(this).remove(); 
     $('.link').append('<span>Link</span>'); 
    }); 
}); 

Answer 1

Вот один из способов сделать это с комментариями в каждом шаге, чтобы показать, что происходит:

$('.link').on('click', function() { 
    // variables holding sample text 
    var textNormal = "Link";    
    var textClicked = "Link Clicked"; 
    // get text from the link 
    var text = $(this).text(); 
    // if text is normal, make it clicked, otherwise make it normal 
    if(text === textNormal) { 
     $(this).text(textClicked); 
    } else { 
     $(this).text(textNormal); 
    } 
}); 

jsFiddle

Answer 2

Если вы можете использовать ванильный JavaScript, это можно сделать очень легко. Я хотел бы использовать что-то вроде ниже:

function changeText(idElement) { 
 
    var element = document.getElementById('element' + idElement); 
 
    if (idElement === 1 || idElement === 2) { 
 
    if (element.innerHTML === 'Read More...') element.innerHTML = 'Close'; 
 
    else { 
 
     element.innerHTML = 'Read More...'; 
 
    } 
 
    } 
 
    
 
    return false; 
 
}

<a id="element1" href="#" onClick="javascript:return changeText(1)">Read More...</a> 
 
<a id="element2" href="#" onClick="javascript:return changeText(2)">Read More...</a>

Надеется, что это помогает!