删除一个附加项目并添加一个新的附加项目

所以，我期待点击一个链接，更改文本，然后当您再次单击它时，它会变回。我目前正在通过追加我想要的文本来做到这一点。但是，我无法将文本更改回原始。这是我迄今为止...任何帮助将不胜感激。删除一个附加项目并添加一个新的附加项目

HTML

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

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

来源

2014-11-14 jfrosty

我可以在香草JS中回答这个问题吗？我可以轻松地做到超级。。。 – 2014-11-14 23:12:11

当然。请。 – jfrosty 2014-11-14 23:17:49

你用'jQuery'' detach（）'函数试过了吗？ http://api.jquery.com/detach/ – algorhythm 2014-11-14 23:31:25

这里是在每一步的意见去做，以显示所发生的事情的一种方式：

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

来源

2014-11-14 22:57:30 nem035

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

希望这有助于！

来源

2014-11-14 23:28:46

删除一个附加项目并添加一个新的附加项目

回答

相关问题