Question

对所有Javascript专家来说，这个问题可能只是基础知识。我正在使用jQuery，我正在使用jQuery.flot创建的工具提示。

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

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

因为未显示div，所以我使用Firebug查找原因，上面的代码行显示特殊字符＆lt;和＆gt;编码为html实体＆lt;和＆gt;正如你在这里看到的那样：

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

我正在搜索几个在线资源以寻求解决方案并尝试了.replace（/ lt; / g，＆＃39;＆lt;＆＃39;）或.html（）。text（）之类的内容超过三个小时，但没有任何帮助。

我在localhost上工作正常。

完整源代码：

<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

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

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

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

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

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

Answer 2

你使用appendTo()，这很好。仅在触发plothover flot事件时才附加节点。这也是正确的。所以你的代码看起来很好，你应该看看这个：

Jquery Flot "plothover" event not working

编辑：您还可以将JS <script>放在HTML之后。

Answer 3

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

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，...如果您担心它会扰乱页面，请将display : none;添加到CSS之前编辑它，然后在编辑时更改类。

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

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

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

3 个答案: