首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >关于属性操作的Jquery问题

关于属性操作的Jquery问题
EN

Stack Overflow用户
提问于 2011-07-22 17:35:29
回答 2查看 176关注 0票数 1

我刚接触jQuery,我想不出解决我的问题的办法。我在我的网站中的一些jQuery对象上使用SVG easytooltip。一切正常,但我需要在运行时更改工具提示的一些属性。我的document.ready函数是这样的:

代码语言:javascript
复制
$(document).ready(function () {
    $("polygon").easyTooltip({
        tooltipId: "easyTooltip2",
        content: 'hello'
    });
});

我希望能够(在我的多边形上鼠标悬停)从我的多边形中读取属性,并将它们传递到content属性中,该属性在工具提示显示时显示...如何访问内容值以在运行时更改它?

我的插件代码现在看起来像这样:

代码语言:javascript
复制
(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);
EN

回答 2

Stack Overflow用户

发布于 2011-07-22 17:41:49

查看.live()

代码语言:javascript
复制
$("polygon").live("mouseover", function() {

     $("polygon").easyTooltip({
           tooltipId: "easyTooltip2",
           content: 'hello'
     });

});

More info

票数 0
EN

Stack Overflow用户

发布于 2011-07-22 17:55:46

你可以这样做:

代码语言:javascript
复制
$("polygon").mouseover(function() {

     $("polygon").easyTooltip({
           tooltipId: "easyTooltip2",
           content: 'changedContent'
     });

});

这将重新创建工具提示:更好的选择是只修改内容,我将查看api以确定是否可行。(我认为不可能使用插件提供的api,重新创建工具提示)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6788154

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档