Question

我有一个名为

的函数

function add_slider_here(){
}

调用时会创建一个进度条。

现在我想调用关于div的id的函数并将进度条附加到它。

我看到这样做的方法是将创建的进度条附加到我已经拥有的div。实现这样的目标的最佳方法是什么：

我有两个div，其中ID为id1和id2

<div id="id1"></div> 
content here

<div id="id2"></div>

现在我想要的是当我调用类似的函数时：

$("#id1").add_slider_here();

它实际上应该只在该div中添加滑块。如何创建这样的函数。

Answer 1

您可以按如下方式创建jQuery插件：

$.fn.add_slider_here = function(){
    var ele = this; // ele will be jQuery object for your id
    // rest of your code to add progress bar from add_slider_here function in this element
}

现在您可以将其称为

$('#id1').add_slider_here();

希望它有所帮助...

Answer 2

试试这个

(function ( $ ) {
    $.fn.add_slider_here = function() {
        //code here
    };

}( jQuery ));

现在你可以像这样使用

$(selector).add_slider_here();

Answer 3

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
        $.fn.add_slider_here = function(){
            $(this).html("<span>slider html</span>");
        }
        $(function(){
            $('#id1').add_slider_here();
        });
        </script>
    </head>
    <body>
        <div id="id1"></div>
        <div id="id2"></div>
    </body>
</html>

如何在具有特定id的div上调用函数

3 个答案: