Javascript 关于属性操作的Jquery问题
我是jQuery新手,无法找到解决问题的方法。 我正在我的网站中的一些SVG对象上使用jQuery easytooltip。一切正常,但我需要在运行时更改工具提示的一些属性。My document.ready函数如下所示:Javascript 关于属性操作的Jquery问题,javascript,jquery,html,Javascript,Jquery,Html,我是jQuery新手,无法找到解决问题的方法。 我正在我的网站中的一些SVG对象上使用jQuery easytooltip。一切正常,但我需要在运行时更改工具提示的一些属性。My document.ready函数如下所示: $(document).ready(function () { $("polygon").easyTooltip({ tooltipId: "easyTooltip2", content: 'hello' }); }); (f
$(document).ready(function () {
$("polygon").easyTooltip({
tooltipId: "easyTooltip2",
content: 'hello'
});
});
(function ($) {
$.fn.content = function (_content) {
$(this).easyToolTip({ content: _content })
};
$.fn.easyTooltip = function (options) {
// default configuration properties
var defaults = {
xOffset: 10,
yOffset: 25,
tooltipId: "easyTooltip",
clickRemove: false,
content: "",
useElement: ""
};
var options = $.extend(defaults, options);
var content;
this.each(function () {
var title = $(this).attr("title");
$(this).hover(function (e) {
content = (options.content != "") ? options.content : title;
content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
$(this).attr("title", "");
if (content != "" && content != undefined) {
$("body").append("<div id='" + options.tooltipId + "'>" + content + "</div>");
$("#" + options.tooltipId)
.css("position", "absolute")
.css("top", (e.pageY - options.yOffset) + "px")
.css("left", (e.pageX + options.xOffset) + "px")
.css("display", "none")
.fadeIn("slow")
}
},
function () {
$("#" + options.tooltipId).remove();
$(this).attr("title", title);
});
$(this).mousemove(function (e) {
$("#" + options.tooltipId)
.css("top", (e.pageY - options.yOffset) + "px")
.css("left", (e.pageX + options.xOffset) + "px")
});
if (options.clickRemove) {
$(this).mousedown(function (e) {
$("#" + options.tooltipId).remove();
$(this).attr("title", title);
});
}
});
};
})(jQuery);
我希望能够,在鼠标悬停在我的多边形上,从我的多边形中读取属性,并将它们传递到内容属性中,当工具提示显示时会显示内容属性。。。如何访问内容值以在运行时对其进行更改
我的插件代码现在如下所示:
$(document).ready(function () {
$("polygon").easyTooltip({
tooltipId: "easyTooltip2",
content: 'hello'
});
});
(function ($) {
$.fn.content = function (_content) {
$(this).easyToolTip({ content: _content })
};
$.fn.easyTooltip = function (options) {
// default configuration properties
var defaults = {
xOffset: 10,
yOffset: 25,
tooltipId: "easyTooltip",
clickRemove: false,
content: "",
useElement: ""
};
var options = $.extend(defaults, options);
var content;
this.each(function () {
var title = $(this).attr("title");
$(this).hover(function (e) {
content = (options.content != "") ? options.content : title;
content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
$(this).attr("title", "");
if (content != "" && content != undefined) {
$("body").append("<div id='" + options.tooltipId + "'>" + content + "</div>");
$("#" + options.tooltipId)
.css("position", "absolute")
.css("top", (e.pageY - options.yOffset) + "px")
.css("left", (e.pageX + options.xOffset) + "px")
.css("display", "none")
.fadeIn("slow")
}
},
function () {
$("#" + options.tooltipId).remove();
$(this).attr("title", title);
});
$(this).mousemove(function (e) {
$("#" + options.tooltipId)
.css("top", (e.pageY - options.yOffset) + "px")
.css("left", (e.pageX + options.xOffset) + "px")
});
if (options.clickRemove) {
$(this).mousedown(function (e) {
$("#" + options.tooltipId).remove();
$(this).attr("title", title);
});
}
});
};
})(jQuery);
退房,现场直播:
.您可以:
$("polygon").mouseover(function() {
$("polygon").easyTooltip({
tooltipId: "easyTooltip2",
content: 'changedContent'
});
});
这将重新创建工具提示:更好的选择是只修改内容,我将查看api,看看是否可能。我认为插件提供的api无法使用,请重新创建工具提示谢谢您的关注。我已经在使用一个用javascript编写的onmousover函数。在这个函数中,我想我必须添加如下内容:$easyTooltip2.content=changedContent;这可能吗?@Paperjam你应该用鼠标盖而不是onmouseover@john这是可能的。您可以通过如下操作创建自己的jQuery插件:$.fn.content=function_content{$this.easyToolTip{content:_content}。我还没有机会测试这个,但我想这可能会让你走上正确的方向。@Nicola谢谢。已经过了我的就寝时间了,我加了$easyTooltip2.contentchange;在我的javascript onmouseover函数中,有一个错误告诉我它不支持content函数。我还在我的插件代码中添加了你的功能:参见我的原始帖子中的编辑