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

如果您可以使用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>

希望这有帮助！

删除附加项并添加新的附加项

2 个答案: