javascript-jQuery Tipsy:动态更新标题

编程之家收集整理的这篇文章主要介绍了javascript-jQuery Tipsy:动态更新标题编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

按照要求,我想更新一个现有的小标题,但似乎不起作用.情况HTML:<ul><liid="li1">Pointatme(title->value)</li><liid="li2">Pointatme(title->callback)</li><liid="li3"original-title="F

按照要求,我想更新一个现有的小标题,但似乎不起作用.

情况

HTML

<ul>
    <li ID="li1">Point at me (Title -> value)</li>
    <li ID="li2">Point at me (Title -> callback)</li>
    <li ID="li3" original-Title="Foobar1">Point at me (Title -> HTML attribute)</li>
</ul>

<button>Click me to update</button>​

Js

$('#li1').tipsy({
    Title: 'Foobar1'
});
$('#li2').tipsy({
    Title: function() { return 'Foobar1'; }
});
$('#li3').tipsy();
$('button').click(function() {
    alert('Updating tipsy Titles');

    // Try setting Title attribute
    $('li1')[0].setAttribute('Title', 'Foobar2');
    $('li2')[0].setAttribute('Title', 'Foobar2');
    $('li3')[0].setAttribute('Title', 'Foobar2');

    // Try setting original-Title attribute
    $('li1')[0].setAttribute('original-Title', 'Foobar2');
    $('li2')[0].setAttribute('original-Title', 'Foobar2');
    $('li3')[0].setAttribute('original-Title', 'Foobar2');
});

您可以在Jsfiddle中玩这个http://jsfiddle.net/TvFmG/3/

问题

我遇到以下问题

>通过tipsy({Title:’string’})设置标题似乎根本不起作用.
> tipsy docs建议可以通过设置original-Title属性更新标题值(请参阅“动态更新文本”部分),但在我看来似乎不起作用(请参阅Jsfiddle).

棘手的文档是否纯属错误,是否存在某些版本不兼容或其他导致该示例无法正常工作问题

解决方法:

据我所知,该文档似乎是正确的并且可以正常工作.

.tipsy({Title: 'attribute'})

用于查找元素上的属性,并从中进行细化.认值为标题属性.因此,对于问题中的示例:

$('#li1').tipsy({
    Title: 'Foobar1'
});

这试图在#li1上找到一个名为Foobar1的属性,该属性不存在. tipsy将寻找的属性Title属性.因此,您需要类似:

<li ID="li1" Title="hooray!">Point at me (Title -> value)</li>

使用自定义属性,并在小巧的构造函数中指定该属性.

<li ID="li1" Foobar1="Title from a custom attribute">Point at me (Title -> value)</li>

$('#li1').tipsy({
    Title: 'Foobar1'
});

对于通过问题的单击部分进行设置,此行上的JavaScript中有一个错误(尽管出于相同的原因,下一行也会发生相同的错误).

$('li1')[0].setAttribute('Title', 'Foobar2');

选择器缺少开头的#,因此jquery找不到您的元素.应该是$(‘#li1’),$(‘#li2’)等…

但是,只有在尚未覆盖每个常用构造函数中的标题的情况下,以这种方式设置标题才有效.因此,在这种情况下,您的代码只能与li3一起使用,因为其他代码具有自定义标题函数,该函数始终返回Foobar1.

完整示例:

<li ID="li3" original-Title="Foobar1">Point at me (Title -> HTML attribute)</li>

$('#li3').tipsy();

将返回Foobar1.然后调用$(‘#li3’)[0] .setAttribute(‘Title’,’Foobar2′);它将返回Foobar2.

总结

以上是编程之家为你收集整理的javascript-jQuery Tipsy:动态更新标题全部内容,希望文章能够帮你解决javascript-jQuery Tipsy:动态更新标题所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

jQuery文章

由于是触摸屏,所以需要一款JS虚拟键盘。上网找了一个好用的VirtualKeyboard,作了修改。 修改该插件参考的博客文章:http://www.cnblogs.com/xinggong/arch
HashMap代码(这种实现方式是错误的,错误原因:代码中_map、_length变量是HashMap的所有实例共用的): /** * HashMap * 2021年09月09日 */ (functi
一、引用CSS和JS:View Code二、HTML:View Code三、JS:$(function () { var total = parseInt(&quot;@(ViewBag.total)
JS数字键盘,JS小键盘CSS代码:#numberkeyboard{ border: 1px solid #b3b3b3; background: #f2f3f7; height: 285px; ma
C.js代码: /** * 有BUG */ (function (global) { var _id; var _map; var _length; global.C = function () {
一、节点模糊搜索功能:搜索成功后,自动高亮显示并定位、展开搜索到的节点。二、节点异步加载:1、点击展开时加载数据;2、选中节点时加载数据。前台代码如下:View Code View Code后台代码(
需求:页面显示教师信息列表,列表中每一条数据显示图片滚动插件,每张图片的长宽及长宽比例各不相同。 前提条件:美工把静态页面写好 HTML代码: @using Models; @{ List&lt;cm
示例代码: marker.addEventListener(&quot;click&quot;, function(){ if (!window.markerClicked) { window.mar
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注