添加類

Question

我有一個contenteditable DIV一系列這樣的段落選款（CONTENTEDITABLE格）：

<p>text</p> 
<p>text</p> 
<p>text</p> 

我希望能夠選擇paragraghs（鼠標）中的一個，並添加一個類：

<p>text</p> 
<p class="added-class">text</p> 
<p>text</p> 

什麼是最簡單的方法來做到這一點？

（我要創造我自己的事件，但我想選定的文本/段落是所選元素）

Answer 1

你可以做到這一點與jquery.simplest和更好的解決方案。

代碼：

$(function(){ 

$('p').mouseover(function() 
{ 
$(this).addClass('added-class'); 

}); 

}); 

實施例：http://jsfiddle.net/3rfyLpjm/

Answer 2

最簡單的解決方法是：

$("p").on("click", function(){ 
    $(this).addClass("added-class") 
}); 

如果你想只有一個p與「增加類」

var chosen = null; 
$("p").on("click", function(){ 
    if(chosen) 
    chosen.removeClass("added-class"); 
    $(this).addClass("added-class") 
    chosen = $(this); 
}); 

Answer 3

嘗試簡單使用jquery：

HTML

<p>text</p> 
<p>text</p> 
<p>text</p> 

的Jquery

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script> 
$(document).on('click','p',function(){ 
    $('p').each(function(){ 
     $(this).removeClass('added-class'); 
    }); 
    $(this).addClass('added-class'); 
}); 
</script> 

Answer 4

不必jQuery的：

var ps = document.getElementsByTagName('p'); 
for (var i = 0; i < ps.length; i++) { 
    ps[i].onclick = function(e) { 
    e.target.classList.toggle('click'); 
    }; 
}