如何在 Javascript 函数中编码 HTML 个字符？

Question

对于所有 Javascript 专家来说，这个问题可能只是基础知识。我正在使用 jQuery 并且正在处理使用 jQuery.flot.

创建的工具提示

以下是我的 javascript 函数在 html 文件中的一部分，这正是我正确呈现工具提示 div 所需要的：

$('<div id="tooltip">' + contents + '</div>').css( {

因为未显示 div 我使用 Firebug 查找原因，上面的代码行显示特殊字符 < 和 > 编码为 html 实体 <和 > 正如你在这里看到的：

$('&lt;div id="tooltip"&gt;' + contents + '&lt;/div&gt;').css( {

我在几个在线资源中搜索解决方案并尝试了 .replace(/lt;/g,'<') 或 .html().text() 之类的东西，但我花了超过三个小时，但没有任何帮助。

我在本地主机上工作正常。

完整源代码：

<script language="javascript" type="text/javascript" src="../JavaScript/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../JavaScript/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../JavaScript/flot/jquery.flot.categories.js"></script>
<![CDATA[
  <script type="text/javascript">

    $(function () {
      var data = [ ]]>{e1Array}<![CDATA[ ];
      $.plot($("#placeholder1"), [ data ], {
        series: {
          bars: {
            show: true,
            barWidth: 1,
            align: "center"
          }
        },
        grid: {
          hoverable: true,
          clickable: true
        },
        xaxis: {
          mode: "categories",
          tickLength: 0
        },
        yaxis: {
          min: 0,
          max: 1,
          ticks: 0
        }
      } );
    });

    var previousPoint = null;
    $("#placeholder1").bind("plothover", function (event, pos, item) {
      if (item) {
        if (previousPoint != item.datapoint) {
          previousPoint = item.datapoint;
          $("#tooltip1").remove();
          showTooltip(item.pageX, item.screenY, item.series.data[item.dataIndex][0] + ': ' + item.series.data[item.dataIndex][1] + ' Einträge');
        }
      } else {
        $("#tooltip1").remove();
        previousPoint = null;
      }
    });

    function showTooltip(x, y, contents) {
      $('<div id="tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        display: 'none',
        top: 100,
        left: x,
        border: '1px solid #fdd',
        padding: '2px',
        'background-color': '#fee',
        opacity: 0.80
      }).appendTo("#e1-container").fadeIn(0);
    }

  </script>
]]>
<div class="e1-container" id="e1-container">
  <div id="placeholder1" class="e1"></div>
</div>

Answer 1

你用appendTo()，没问题。仅当触发 plothover flot 事件时才附加节点。这也是正确的。所以你的代码看起来不错，你应该看看这个：

Jquery Flot "plothover" event not working

编辑： 您也可以将 JS <script> 放在 HTML.

之后

Answer 2

不要直接在选择器里面添加内容。

1) 创建您的 DOM ：var k = $('<div id="tooltip"></div>');

2) 填写你的 DOM :

// Add after
k.append(contents);
// Replace 
k.html(contents);
// Replace and the content is just some text
k.text(contents);

3) 设置 CSS : k.css({ ... })

4) 将 DOM 添加到您的页面 k.appendTo('#container');。您还可以使用 $('#container').html(k); 替换容器内容并避免重复

简而言之：

var k = $('<div id="tooltip"></div>')
        .append(contents)
        .css({})
        .appendTo('#container');

注意：最好的方法是已经创建工具提示 div 并仅填充元素以避免创建两个具有相同 ID 的 div，...如果您担心它会扰乱页面，在CSS之前添加display : none;编辑它，然后在编辑它时更改类。

您需要在 2 个条件下创建 div：

页面是在加载时创建的，组件数量可变
您想动态加载CSS或JS。

Answer 3

<![CDATA[
  <script type="text/javascript">

这似乎是您的问题，或者至少是 FireBug 在您的代码中显示 html 实体的原因。如果你想 use cdata at all，你应该把它放在 <script> 标签内。

为什么工具提示根本不显示，我只能猜测，但对于文本内容我建议使用

$('<div id="tooltip"></div>').text(contents)

而不是将其用作 html 字符串。

如何在 Javascript 函数中编码 HTML 个字符？

How do I encode HTML characters within Javascript functions?

html

javascript

jquery

character-encoding

special-characters