如何使用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點擊時按鈕。

任何人都可以幫忙嗎？

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>