Question

我使用以下代码实现了真正的简单jQuery扰码程序功能：

HTML：

<a href="" onclick="return false" class="spoiler" content="spoiled content">
    Reveal spoiler
</a>

jQuery / Javascript：

$('a.spoiler').click(function(){
    $text = "<a href=\"\" onclick=\"return false\" class=\"spoiler\" content=\"" + $(this).text() + "\">" + $(this).attr("content") + "</a>"; 
    $(this).replaceWith($text);
});

基本上，我只想让剧透的内容属性与标签之间的文本交换。它适用于第一次单击，但再次单击时不会换回。

有没有办法让我以无限期交换内容的方式实现这一点？

谢谢！

Answer 1

只需使用

$('a.spoiler').click(function(){
    var text = $(this).text(); 
    var content = $(this).attr("content");
    $(this).text(content).attr("content", text)
});

DEMO

否则，您需要使用Event Delegation委托事件方法.on()，因为您正在使用replaceWith删除elemnent以及绑定了哪个事件。

$(document).on('click','a.spoiler',function(){
    $text = "<a href=\"\" onclick=\"return false\" class=\"spoiler\" content=\"" + $(this).text() + "\">" + $(this).attr("content") + "</a>"; 
    $(this).replaceWith($text);
});

DEMO

Answer 2

您可以使用此

$('a.spoiler').click(function () {
    $(this).text(function (_, t) {
        return t.trim() == "Reveal spoiler" ? $(this).attr('content') : "Reveal spoiler";
    });
});

DEMO

Answer 3

将您的代码更改为 -

$(document).on('click','a.spoiler',function(){
    $text = "<a href=\"\" onclick=\"return false\" class=\"spoiler\" content=\"" + $(this).text() + "\">" + $(this).attr("content") + "</a>"; 
    $(this).replaceWith($text);
});

如果将新HTML注入页面，请使用委派事件附加事件处理程序

修改 -

DEMO

Answer 4

$('a.spoiler').click(function(){
    $text =  $(this).attr("content")
    $(this).attr("content",$(this).text()).text($text);
});

非常简单的jQuery扰流器功能一半工作

4 个答案:

DEMO