Flot for Wordpress Tooltip插件出現問題

Question

我正在嘗試為Flot for Wordpress啟用工具提示，並在添加某些功能時遇到問題，我需要從網上嘗試破譯的內容開始工作。

我下載了最新版本的浮動圖表工具提示，並在加載插件時加載了腳本。

當以下js代碼不在代碼中或函數如下所示時，我創建的圖表將完美加載。

誰能告訴我阻止我的圖表出現的代碼出了什么問題？

提前加油，艾倫。

我認為這是我需要使工具提示起作用的代碼

 function showTooltip(x, y, contents) {
        $("<div id="tooltip">" + contents + "</div>").css({
            position: "absolute",
            display: "none",
            top: y + 5,
            left: x + 20,
            border: "2px solid #4572A7",
            padding: "2px",     
            size: "10",   
            "background-color": "#fff",
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }

這是我刪除代碼內部時起作用的

function showTooltip(x, y, contents) {
        position: "absolute"
}

下面是完整的代碼：

echo ' <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="' . plugins_url( $path ) . '/flot-for-wp/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="' . plugins_url( $path ) . '/flot-for-wp/flot/jquery.flot.resize.js"></script>
<script language="javascript" type="text/javascript" src="' . plugins_url( $path ) . '/flot-for-wp/flot/excanvas.min.js"></script>
<link href="' . plugins_url( $path ) . '/flot-for-wp/flot/layout.css" rel="stylesheet" type="text/css">
<div id="placeholder" style="width:95%; height:85%; max-width:100%; margin:auto;"></div>
';
echo '
<script language="javascript" type="text/javascript" id="source">


var lie_results = [ ';
foreach($chartdata as $row){
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_lie'] . '],';
}
echo ' ];

var options_results = [ ';
foreach($chartdata as $row){
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_options'] . '],';
}
echo ' ];

var context_results = [ ';
foreach($chartdata as $row){
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_context'] . '],';
}
echo ' ];

var decide_results = [ ';
foreach($chartdata as $row){
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_decide'] . '],';
}
echo ' ];


var dataset = [
    {
        label: "Lie",
        data: lie_results
    },  {
        label: "Context",
        data: context_results
    }, {
        label: "Options",
        data: options_results
    },{
        label: "Decide",
        data: decide_results
    }
];


var options = {
    xaxis: { mode: "time", tickSize: [2, "month"] },
    yaxes: [{ min: ' .$min_count . ', max: ' .$max_count . ' },{},{},{}],
    points: { show: true, symbol: "circle", fill: true },
    lines: { show: true, },
    legend: { noColumns: 0, labelFormatter: function (label, series) { return "<font color=\"white\">" + label + "</font>";}, backgroundColor: "#000", backgroundOpacity: 0.9, labelBoxBorderColor: "#000000", position: "nw"},
    grid: { hoverable: true, mouseActiveRadius: 8 }
};


jQuery(document).ready(function($){
var placeholder = $("#placeholder");
var plot = $.plot(placeholder,dataset,options);
$("#placeholder").UseTooltip();
}
);


var previousPoint = null;

$.fn.UseTooltip = function () {
    $(this).bind("plothover", function (event, pos, item) {                         
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();

                var x = item.datapoint[0];
                var y = item.datapoint[1];                

                console.log(x+","+y)

                showTooltip(item.pageX, item.pageY,
                  x + "<br>" + "<strong>" + y + "</strong> (" + item.series.label + ")");
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });
};

function showTooltip(x, y, contents) {
        $("<div id=\'tooltip\'>" + contents + "</div>").css({
            position: "absolute",
            display: "none",
            top: y + 5,
            left: x + 20,
            border: "2px solid #4572A7",
            padding: "2px",     
            size: "8",   
            opacity: 0.85,
            background: "#4572A7",
        }).appendTo("body").fadeIn(200);
    };




</script></div>';

Answer 1

使用javascript時，請養成檢查調試器控制台中是否有錯誤的習慣。 這是無效的javascript：

$("<div id="tooltip">" + contents + "</div>")

它產生：

SyntaxError: Unexpected identifier

為什么？ 因為引用不正確。

嘗試：

"<div id=\"tooltip\">" + contents + "</div>"

工具提示周圍的引號被轉義。