Question

我在contenteditable div中有一系列这样的段落：

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

我希望能够选择其中一个paragragh（用鼠标）并为其添加一个类：

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

最简单的方法是什么？

（我将创建自己的活动，但我希望选定的文字/段落成为所选元素）

Answer 1

最简单的解决方案是：

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

如果你想只有一个带有＆＃34;添加类＆＃34;

的p

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

Answer 2

不需要jQuery：

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

Answer 3

您可以使用jquery.simplest和更好的解决方案来完成此任务。

代码：

$(function(){

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

});

});

示例：http://jsfiddle.net/3rfyLpjm/

Answer 4

使用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>

将类添加到选定的段落（contenteditable div）

4 个答案: