jquery：工具提示在空格后不显示数据答案

【问题标题】：jquery: tooltip is not displaying data after spacejquery：工具提示在空格后不显示数据
【发布时间】：2023-03-10 11:45:01
【问题描述】：

我正在尝试使用 jquery 工具提示显示鼠标悬停事件数据。有这样的数据： {"description":"marry christmas","date":"2016-12-25"}` 我从服务器获得的 JSON 字符串。我正在像这样在我的日历上解析它 holi 是一个保存在 JSON 字符串之上的变量名这是我的进口

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>



   $.each(JSON.parse(holi), function(i, item) {
        var holidayDate=item.date+"";
       var parts= holidayDate.split("-");
       alert("parts:"+parts[2]);
       document.getElementById(parts[2]+parts[1]).style.color="green";
      var va= document.getElementById(parts[2]+parts[1]).innerHTML;
       document.getElementById(parts[2]+parts[1]).innerHTML="<label id="+parts[2]+parts[1]+" title="+
       item.description+">"+va+"</label>";
       $("#"+parts[2]+parts[1]).tooltip();

    });
    }

现在，当我在 12 月 25 日悬停时，它只是显示我结婚而不是“嫁给圣诞节”，我在 chrome 中尝试了这个。请让我看看这有什么问题？？

【问题讨论】：

首先，为什么不用jQuery来获取DOM元素呢？其次：尝试将描述放在title 属性中。
您的代码看起来像是通过某个 id 值找到了一个元素，然后尝试在其中添加另一个具有 same id 值的元素。这是一个错误：id 值在 DOM 中必须是唯一的。
首先我发现使用 java 脚本获取 DOM 元素很方便，第二次我尝试了这种方式，但结果相同。只给我第一部分
@Pointy：那我该怎么做呢？因为我在运行时得到了所有变量。我尝试删除标签部分中的 **id="+parts[2]+parts[1]+" ** 。但是它没有在该元素上显示任何工具提示，因为它会覆盖它
为什么<label> 需要它自己的ID？您始终可以通过父元素的 id 找到它。

标签： javascript jquery css json

【解决方案1】：

您需要在 title 属性值周围添加引号。试试这个：

document.getElementById(parts[2]+parts[1]).innerHTML
="<label id="+parts[2]+parts[1]+" title='"+item.description+"'>"+va+"</label>";

请注意您的 item.description 变量周围的 = 和 > 之前的单引号。

另外，正如其他人所指出的，避免从 javascript 中写出 DOM。它容易出错且难以维护。

【讨论】：

【解决方案2】：

在构造标题 HTML 时，您需要考虑 HTML 将如何被解析。如果您的标题消息有空格，则必须引用 HTML 属性值。

您可以通过利用 jQuery API 来大量清理代码，因为您已经在使用该库：

$.each(JSON.parse(holi), function(i, item) {
  var holidayDate = item.date + "";
  var parts = holidayDate.split("-");
  var dayId = parts[2] + parts[1], day = $("#" + dayId);

  day.css("color", "green")
      .html($("<label/>", {
        title: item.description,
        html: day.html()
      }))
      .find("label").tooltip();

});

使用 jQuery，您可以使用表单构建新的 HTML，减少难看的引用争吵

$("<tagname/>" {
  attribute: value,
  attribute: value,
  // ...
})

在这种情况下，代码先设置“title”属性，然后设置内容； "html" 属性的作用类似于 jQuery .html() 方法。

之后，它会找到刚刚添加的<label> 元素并调用.tooltip() 方法。

【讨论】：