代码之家 › 专栏 › 技术社区 › Jason

jquery扩展帮助-添加条件语句

jquery

Jason · 技术社区 · 15 年前

我试图编写一个jquery wrapper扩展,它接受一个content div,然后以模态的方式显示它。我很难让它工作。当我把所有的东西都连接起来的时候,它似乎是有效的,但是当我试图使用多条线的时候,它就被打断了。Daisychaining的问题是我不知道如何获取其中的条件。

这不管用

(function ($) {
    $.fn.showAsModal = function () {
        var ret = this.css({ 'position': 'absolute', 'top': '400px', 'left': '100px', 'z-index': '9001' });
        if (this.parent('.modal-container').size() <= 0) ret = this.wrap("<div style=\"display:none;\" class=\"modal-container\"></div>");
        if (this.siblings('.modal-mask').size() <= 0) ret.parent().insertAfter("<div style=\"width:" + $(document).width() + "px;height:" + $(document).height() + "px;\" class=\"modal-mask\"></div>");
        return ret;
    };
})(jQuery);

这确实

(function ($) {
    $.fn.showAsModal = function () {
        return this.css({ "position": "absolute", "top": "400px", "left": "100px", "z-index": "9001" })
        .wrap("<div style=\"display:none;\" class=\"modal-container\"></div>")
        .parent().show()
        .append("<div style=\"width:" + $(document).width() + "px;height:" + $(document).height() + "px;\" class=\"modal-mask\"></div>")
        .end();
    };
})(jQuery);

但是我不知道如何在那里得到条件…

这就是我想要做的:

鉴于

<div id="content">
    This is a content window
</div>

我想得到

<div class="modal-container" style="">
    <div id="content" style="position: absolute; top: 400px; left: 100px; z-index: 9001;">
        This is a content window
    </div>
    <div class="modal-mask" style="width: 1680px; height: 897px;">
    </div>
</div>

当我执行$('content').showAsModal()时

2 回复 | 直到 15 年前

phixr 15 年前

你可以试试这个:

(function ($) {
$.fn.showAsModal = function () {
    return this.each(function(){
        var self = $(this)
        self.css({'position': 'absolute', 'top': '400px', 'left': '100px', 'z-index': '9001'});

        if (self.parent('.modal-container').length <= 0)
            self.wrap("<div style=\"display:none;\" class=\"modal-container\"></div>");
        if (self.siblings('.modal-mask').length <= 0)
            self.parent().append("<div style=\"width:" + $(document).width() + "px;height:" + $(document).height() + "px;\" class=\"modal-mask\"></div>");

    });
};
})(jQuery);

this.each() 将在jquery选择的每个元素上运行。

casablanca 15 年前

不能将值赋给 this 和 return ret; 收益率 undefined 因为 ret 未定义。也许你想这样做:

var ret = this.css(...);
...
return ret;

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前

Eliable · 使点击计数器和进度条协同工作

1 年前

mlri · 从不同的onclick事件执行相同的javascript函数

1 年前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

1 年前

Jack Maessen · 在处理程序上使用时如何获取输入类型

1 年前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

1 年前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

1 年前