Question

我想编写一个JavaScript函数来停用点击的单词并激活已停用的单词。初始状态是两个是活动的，一个不是。

<div id="10" style="white-space: pre; color: #ddd">
<a href="#" onclick="edit(10, 'one')">one</a>     
<span>two</span>     
<a href="#" onclick="edit(10, 'three')">three</a>     
</div>

这是MWE：

https://jsfiddle.net/kowalsky/xpvt214o/145934/

编辑：处于活动状态我的意思是可点击，即有onclick事件。停用意味着只是跨度。正如最初的例子和MWE。

我对javascript和js + jquery版本感兴趣。

Answer 1

我检查了你的小提琴你是否正常，问题是你选择的曲目，处理所有'和"并在必要时逃避它们只是要求让所有人都陷入非常微妙的细节，然而 FIRST 变体是对这种方法的修复（如果你有特殊的理由坚持它），而 SECOND 如果我是你，我会怎么做。

<强>第一

＆＃13;

function edit(id, text) {
	var div = $('#'+id);

  var span = div.children("span");

  var ahref =  '<a href="#" onclick="edit(' + id + ',\'' + span[0].textContent + '\')">';
 	span.replaceWith(ahref + span[0].textContent + '</a>');
	var clicked = div.children(":contains(" + text + ")");		
 	clicked.replaceWith("<span>"+text+"</span>");	
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="10" style="white-space: pre; color: #ddd">
<a href="#" onclick="edit(10, 'one')">one</a>     
<span>two</span>     
<a href="#" onclick="edit(10, 'three')">three</a>     
</div>

＆＃13;

SECOND （推荐）

＆＃13;

$('div').on('click', 'a', function(){
  var anchor = $(this);
  var span = $(this).siblings('span');
  anchor.replaceWith(span.clone().text(anchor.text()));
  span.replaceWith(anchor.clone().text(span.text()));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="10" style="white-space: pre; color: #ddd">
<a href="#">one</a>     
<span>two</span>     
<a href="#">three</a>     
</div>

＆＃13;

Answer 2

您可以使用jquery replaceWith函数来实现此目的。

＆＃13;

function edit(ele) {      
    $(".myClass.deactive").replaceWith(function () {
    return $('<a/>', {
        class: 'myClass',
        html: this.innerHTML,
        href:"#",
        onclick:"edit($(this))"
    });	});
    ele.replaceWith(function () {
    return $('<span/>', {
        class: 'myClass deactive',
        html: this.innerHTML        
    });	});
   
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="10" style="white-space: pre; color: #ddd">
<a href="#" class="myClass" onclick="edit($(this))">one</a>     
<span class="myClass deactive">two</span>     
<a href="#" class="myClass" onclick="edit($(this))">three</a>     
</div>

＆＃13;

javascript停用点击的文字并激活未点击的文字

2 个答案: