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获取该表格单元格中包含的文本,然后脚本确定要附加到textarea的标记集。
我更喜欢将单元格中的文本与每个单元格的onclick
参数添加唯一函数的方法进行比较,因为我想保留我的代码DRY,这将涉及创建一堆函数基本上做同样的事情,或添加许多不需要的onclick
属性。
我已经用elert验证我在调用$(this).text()
时确实收到了文字“Bold”,但它似乎并不满足if语句。
我的JavaScript有什么问题?
答案 0 :(得分:1)
我已经用elert验证了当我调用$(this).text()时我确实得到了“Bold”文本,但它似乎并不满足if语句。
我的JavaScript有什么问题?
很可能是空格,例如您正在检查的字符串末尾的空格("Bold "
)。
我根本不会这样做,它是脆弱和重复的,你会有一个巨大的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;
}
});
答案 1 :(得分:0)
$(this).text()
可能包含会破坏if
条件的空格。所以我认为问题就在于此。使用$(this).text().trim()
以便清除空格。 PLUNCKER
$("#content-styling-bar td").click(function() {
if ($(this).text().trim() == "Bold") {
$("#description").append("<b>shirin</b>");
}