2016-12-24 8 views
0

jqueryツールチップを使用してマウスのホバーイベントデータに表示しようとしています。この方法のようにデータを持っています。 {"description":"marry christmas","date":"2016-12-25「} `私はJSON文字列としてサーバから得た私は ホーリーは、JSON文字列の上に保持する変数名である。この方法のように私のカレンダーにそれを解析しています これは私のインポートですjquery:スペースの後にツールチップがデータを表示しない

<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日に置くと

は今、それはちょうど私が結婚する代わりに、私はクロームでこれを試してみました「christamasと結婚」見せている。タイトルのHTMLを構築する場合、これは

+1

まず、DOM要素を取得するためにjQueryを使用しないでください。 Secondly: 'title'属性の中に記述を入れてみてください。 – ppasler

+0

あなたのコードは、あるid値で要素を見つけて、同じ* id *値を持つ別の要素を追加しようとしているようです。それはエラーです:id値は、DOM全体で一意でなければなりません。 – Pointy

+0

最初に私は便利なJavaのスクリプトを使用してDOM要素を取得し、2番目私はその方法を試みたが、同じ結果。ちょうど私に1部を与えてください – LowCool

答えて

0

を??に間違っているものを私に聞かせてください、あなたがする必要がありますタイトルのメッセージにスペースが含まれている場合は、HTML属性の値を引用符で囲む必要があります。

0 jQueryを使って

$.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(); 

}); 

あなたはあまり醜い使用して引用は、論争に新しいHTMLを構築することができ、:あなたはすでにライブラリを使用しているので、

あなたは、jQueryのAPIを活用することで多くのことをあなたのコードをクリーンアップすることができフォームこの場合

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

、コードは、「タイトル」属性と、コンテンツを設定します。 「html」属性はjQuery .html()メソッドのように機能します。

その後、ちょうど加えられた<label>要素を見つけ、.tooltip()メソッドを呼び出します。

1

タイトル属性値の前後に引用符を追加する必要があります。これを試してみてください:

item.description変数の前後に、=の後と>の前に一重引用符があることに注意してください。

また、他の人が指摘しているように、javascriptからDOMを書き出すことは避けてください。エラーが発生しやすく、保守が難しい。

関連する問題