Question

我正在研究JQuery插件，我是新手，我已经做了以下工作： code.js

var isstatic = false;
$(document).ready(function () {

    $(".div-to-slide").hide();
    $(".show_hide").show();

    $(".show_hide").click(function () {
        $(".div-to-slide").toggle("slide");
        if (isstatic) {
            $("#myImg").attr("src", "/1.png");
            isstatic = false;
        }
        else {


            $("#myImg").attr("src", "/final-cropped.gif");
            isstatic = true;
        }
    });


});

Everyhting正在代码中工作，但我被要求制作一个jQuery插件，以便用户写一行，并能够将其调用到他/她的网站。我有点困惑怎么做，我试过的是这个

(function ($) {
    $.fn.recordsign = function () {
        var isstatic = false;
        $(".div-to-slide").hide();
        $(".show_hide").show();

        $(".show_hide").click(function () {
            $(".div-to-slide").toggle("slide");
            if (isstatic) {
                $("#myImg").attr("src", "/1.png");
                isstatic = false;
            }
            else {


                $("#myImg").attr("src", "/final-cropped.gif");
                isstatic = true;
            }
        });


    }
})(jQuery);

我已经阅读了一些教程，但是不知道在哪里写$ .extend，设置，选项和其他特定于插件的代码然后如何调用它，目前我这样称呼它：

<a class="myclass" href="#">Function call</a>
$(document).ready(function () {
   $('.show_hide').recordsign();
});

我觉得有些不对劲，请抽出时间帮助解决这个问题。

Answer 1

我认为你应该使用

$(document).ready(function () {
   $('.myclass').recordsign();// .myclass not .ma
});

此外，您需要关注一些要点

特定元素的插件：您的目标元素应该是特定的，以便您可以在插件中使用this作为当前对象。
您的图片源应该是动态的，为此您可以使用data-*属性来获取它的运行时间。
isstatic应该通过选项传递，默认情况下可以是false。

如何将我的jQuery代码编写为jQuery插件

1 个答案: