如何使用jquery更改按鈕單擊時關注的contenteditable元素類？

Question

我正在嘗試更改位於contenteditable div中的元素的類

我目前的代碼是：

<button>swap class</button>
<div contenteditable="true">
    <h1 class="line-height-1">Your Headline Here</h1>
</div>    
<div contenteditable="true">
    <h1 class="line-height-1">Your Headline Here</h1>
</div>

我想在單擊按鈕時將類.line-height-1替換為當前所選可編輯div的另一個.line-height-1 。

有人可以幫忙嗎？

Answer 1

當您單擊按鈕時，聚焦元素會模糊。 您需要將焦點元素存儲在變量中，並在按鈕單擊時更改它。 按下按鈕后使其聚焦。

 var element; $("div[contenteditable]").focus(function(){ element = this; }); $("button").click(function(){ $(element).focus().find("h1").removeClass("line-height-1").addClass("newClass"); }); 

 .line-height-1 { color: red } .newClass { color: blue } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>swap class</button> <div contenteditable="true"> <h1 class="line-height-1">Your Headline Here</h1> </div> <div contenteditable="true"> <h1 class="line-height-1">Your Headline Here</h1> </div>