Question

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有什么问题？

Answer 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;
    }
});

Answer 2

$(this).text()可能包含会破坏if条件的空格。所以我认为问题就在于此。使用$(this).text().trim()以便清除空格。 PLUNCKER

 $("#content-styling-bar td").click(function() {
  if ($(this).text().trim() == "Bold") {
  $("#description").append("<b>shirin</b>");
 }

单击时将文本附加到文本区域？

2 个答案: