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

【问题标题】：Appending text to text area on click?单击时将文本附加到文本区域？
【发布时间】：2015-11-25 02:42:37
【问题描述】：

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 参数添加独特的函数，因为我想保持我的代码干燥，这将涉及创建一堆函数来完成同样的事情，或者添加很多不需要的onclick 属性。

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

我的 JavaScript 有什么问题？

【问题讨论】：

“我的 JavaScript 有什么问题？” 我们不能告诉你，你还没有说问题是什么。会发生什么，您希望发生什么？
坦率地说，我根本不会称之为 DRY。你将不得不重复所有的文本，并有一个庞大的 if/else 语句——而且是一个脆弱的语句。相反，我会在单元格上使用data-* 属性来存储标签/操作：<td data-tag="b">Bold</td> 然后$("#description").append(document.createElement($(this).attr("data-tag")));
@T.J.Crowder 也可以，但会导致Image 按钮出现问题。这需要调用一些额外的代码，以便我可以上传图片。
对于复杂情况，您可以在非展示属性值上进行分支，但它会自动处理常见情况（b、i、u、h1、h2）。

标签： javascript jquery html click append

【解决方案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;
    }
});

【讨论】：

【解决方案2】：

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

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

【讨论】：