javascript - 单击时将文本 append 到文本区域？

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 获取该表格单元格中包含的文本，然后脚本确定要 append 到文本区域的标记集。

我更喜欢比较单元格内文本的方法，而不是向每个单元格的 onclick 参数添加独特的函数，因为我想让我的代码保持干燥，而这将涉及创建一堆函数来做基本相同的事情，或者添加很多不需要的 onclick 属性。

我已经通过 elert 验证，当我调用 $(this).text() 时，我确实得到了文本“Bold”，但它似乎不满足 if 语句。

我的 JavaScript 有什么问题吗？

Answer 1

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