JavaScript(jQuery):
$("#content-styling-bar td").click(function() {
if ($(this).text() == "Bold ") {
$("#description").append("<b></b>");
}
});
HTML:
<table id="content-styling-bar">
<tr>
<td>
Bold
</td>
<td>
Italic
</td>
<td>
Underline
</td>
<td>
Main Heading
</td>
<td>
Sub Heading
</td>
<td>
Link
</td>
<td>
Image
</td>
</tr>
</table>
我有这个代码。此代码用于网站的博客管理。这个想法是,当我单击粗体表格单元格时,jQuery 获取该表格单元格中包含的文本,然后脚本确定要 append 到文本区域的标记集。
我更喜欢比较单元格内文本的方法,而不是向每个单元格的 onclick
参数添加独特的函数,因为我想让我的代码保持干燥,而这将涉及创建一堆函数来做基本相同的事情,或者添加很多不需要的 onclick
属性。
我已经通过 elert 验证,当我调用 $(this).text()
时,我确实得到了文本“Bold”,但它似乎不满足 if 语句。
我的 JavaScript 有什么问题吗?
最佳答案
I have verified with an elert that I'm indeed getting the text "Bold" when I call $(this).text(), but it doesn't seem to satisfy the if statement.
What is the issue with my JavaScript?
最有可能的空格,例如您正在检查的字符串末尾的空格(“粗体”
)。
我根本不会这样做,它很脆弱且重复,您将有一个巨大的 if
/else
并且在一个地方更改演示文本可以在其他地方炸掉你的代码。相反,我会使用 data-*
属性:
HTML:
<table id="content-styling-bar">
<tr>
<td data-tag="b">
Bold
</td>
<td data-tag="i">
Italic
</td>
<!-- ... -->
</tr>
</table>
然后:
$("#content-styling-bar td").click(function() {
$("#description").append(document.createElement($(this).attr("data-tag")));
});
如果您有更复杂的情况,它仍然会为您提供一些非演示文本的内容来打开,并且它会自动执行常见情况:
$("#content-styling-bar td").click(function() {
var tag = $(this).attr("data-tag");
switch (tag) {
case "img":
handleImage();
break;
case "a":
handleLink();
break;
default: // "b", "i", "u", "h1", "h2", ...
$("#description").append(document.createElement(tag));
break;
}
});
关于javascript - 单击时将文本 append 到文本区域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32304892/