删除追加的项目并添加新的追加项目

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

如果你能使用vanilla 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>

希望这有帮助！

Answer 2

以下是在每个步骤中使用注释来显示正在发生的事情的一种方法：

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