jquery - タイトル属性からの取得

Question

オブジェクトのロールオーバー時にtitle属性から情報を取得して表示するツールチップがあります。

名前、住所、画像の3つの異なる画像を表示したいと思います。許可されているタイトル属性は1つだけなので、どうすればそれを実現できますか？

名前を付けて保存することはできますtitle="John, Address 55, image.jpg"が、jqueryですべての個別の情報（名前、アドレス、リンク）を使用する方法がわかりません。

より良い解決策があれば、提案してください。

Answer 1

HTML5 データ属性の使用

HTML

<div data-name="John"
  data-location="Address 55"
  data-image="image.jpg">
</div>

JavaScript

var el = $('div')
el.data('name')
el.data('location')
el.data('image')

Answer 2

これを試すことができます

HTMLコード

<div>
    <div title="John,Address 55,image.jpg" class="facedata"> fdgfdsg
    </div>
</div>

JS コード

var s, arr=new Array();
s= $('.facedata').attr('title');
arr=s.split(",");
for(var a=0; a<arr.length;a++){
  console.log(arr[a]);
}

http://jsfiddle.net/hCMJ5/29/

Answer 3

このようにあなたのタイトルを入れてください：

title='{"name":"John","age":"55","img":"image.jpg"}'

then use this is js code

var myString = $("#myObject").attr('title').
var obj = jQuery.parseJSON(myString);

alert(obj.name);
alert(obj.age);
alert(obj.img)

明らかに、実際にはユーザーに警告するのではなく、カスタムツールチップでこれらの値を使用してください

Answer 4

ツールチップのようなもの。

<a href="#" class="tooltip" title="name, address, image">tool tip</a>
<div id="tooltip-content">
    <span class="name field"></span>
    <span class="address field"></span>
    <span class="image field"></span>
</div>

<script type="text/javascript">

jQuery(document).ready( function (){ 
    jQuery(".tooltip").hover(function(){
        var str = jQuery(this).attr("title").split(",");
        jQuery.each(str, function(index, value){
            value = value.trim();
            jQuery(".field:eq("+index+")").text(value);
        });
        jQuery("#tooltip-content").fadeIn();
    }, function(){
        jQuery("#tooltip-content").fadeOut();
    });
});
</script>