Question

我有一个应用程序，允许用户为textarea选择特定的字体。某些字体需要具有不同的行高属性。我试图让行高取决于他们点击的字体。我可以添加班级＆＃39;更大的线路＆＃39;当他们点击id =＆＃34;更大的行＆＃34;时，我无法在他们点击标准行＆＃39;时删除该课程。我觉得我忽略了一些非常简单的事情。有什么想法吗？另外......我对编码很陌生。

HTML：

<textarea>        
   <div class="editable" id="standard-line">"Font A"</div>
   <div class="editable" id="larger-line">"Font B"</div>
</textarea>

CSS：

textarea.editable {
  line-height: 0.8em;
}
textarea.editable.larger-line {
  line-height: 1em;
}

JS：

$("#larger-line").on("click", function (e) {
   $("textarea.editable").addClass('larger-line'); 
});
$("#standard-line").on("click", function (e) {
   $("textarea.editable").removeClass('larger-line');
});

Answer 1

$("#larger-line").on("click", function (e) {
   $("textarea.editable").addClass('larger-line'); 
});
$("#standard-line").on("click", function (e) {
   $("textarea.editable").removeClass('larger-line');
});

该代码将匹配以下元素。

<textarea class="editable></textarea>

首先你的代码不会工作，因为你把html放在textarea里面。这会将html转换为纯文本。

看看这个jsfiddle：

Jsfiddle

以下JS代码：

$("#larger-line").on("click", function (e) {
   $("textarea.editable").addClass('larger-line'); 
});
$("#standard-line").on("click", function (e) {
   $("textarea.editable").removeClass('larger-line');
});

以下标记：

<div id="standard-line">"Font A"</div>
<div id="larger-line">"Font B"</div>
<textarea class="editable"></textarea>

点击＆＃34;字体A＆＃34;或＆＃34;字体B＆＃34;它会添加或删除类＆＃34;更大的线＆＃34;来自textarea的课程＆＃34; editable＆＃34;

我希望这可以帮助您解决问题。

Answer 2

您使用"textarea.editable"选择了可编辑类的所有textarea元素。我认为你想要做的是"textarea .editable"，它选择所有在textarea中可编辑类的元素。但是，textareas只是包含文本，所以你将html作为文本作为输出，它将无法选择。

通过jQuery添加类删除类...我错过了什么？

2 个答案: