Question

我有一个工具提示，它在对象翻转中从其title属性中提取信息并显示它。

我想展示三种不同的方式：名称，地址和图像。我怎样才能实现这一点，因为只允许一个title属性？

我可以将其保存为title="John, Address 55, image.jpg"但不知道如何使用jquery使用每一条单独的信息（名称，地址，链接）。

如果有更好的解决方案，请提出建议。

Answer 1

使用HTML5数据attratutes

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 CODE

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

JS CODE

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

只需使用JSON来存储数据，就像这样

var DATA = {

name：“约翰”，

age：“55”，

title：“约翰”

}

获取值可以使用此表示法：

DATA.name or DATA['name']

Answer 4

把你的头衔写成：

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 5

像工具提示之类的东西。

<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>

从title属性中获取

5 个答案: