javascript - 我需要将 jsFiddle 中的脚本放入工作

Question

这个问题不太可能对任何 future 的访客有帮助；它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用， visit the help center 。

已关闭 10 年前。

我有一个小问题...我需要把这个脚本 http://jsfiddle.net/mctcs/在我的页面上工作，但我不知道该怎么做。复制什么到哪里，以及如何让 jquery 工作!我没有关于 jquery 的基础知识，也不知道它是如何运作的。

(function($){

$.fn.imageTick = function(options) {

    var defaults = {
        tick_image_path: "images/radio.gif",
        no_tick_image_path: "no_images/radio.gif",
        image_tick_class: "ticks_" + Math.floor(Math.random()),
        hide_radios_checkboxes: false
    };

    var opt = $.extend(defaults, options);

    this.each(function(){

        var obj = $(this);
        var type = obj.attr('type'); // radio or checkbox

        var tick_image_path = typeof opt.tick_image_path == "object" ?
            opt.tick_image_path[this.value] || opt.tick_image_path["default"] :
            opt.tick_image_path;

        var no_tick_image_path = function(element_id) {
            var element = document.getElementById(element_id) || { value: "default" };
            return typeof opt.no_tick_image_path == "object" ?
                opt.no_tick_image_path[element.value] || opt.no_tick_image_path["default"]:
                opt.no_tick_image_path;
        }

        // hide them and store an image background
        var id = obj.attr('id');
        var imgHTML = '<img src="' + no_tick_image_path(id) + '" alt="no_tick" class="' + opt.image_tick_class + '" id="tick_img_' + id + '" />';

        obj.before(imgHTML);
        if(!opt.hide_radios_checkboxes){
            obj.css('display','none');
        }

        // if something has a checked state when the page was loaded
        if(obj.attr('checked')){
            $("#tick_img_" + id).attr('src', tick_image_path);
        }

        // if we're deadling with radio buttons
        if(type == 'radio'){

            // if we click on the image
            $("#tick_img_"+id).click(function(){
                $("." + opt.image_tick_class).each(function() {
                    var r = this.id.split("_");
                    var radio_id = r.splice(2,r.length-2).join("_");
                    $(this).attr('src', no_tick_image_path(radio_id))
                });
                $("#" + id).trigger("click");
                $(this).attr('src', tick_image_path);
            });

            // if we click on the label
            $("label[for='" + id + "']").click(function(){
                $("." + opt.image_tick_class).each(function() {
                    var r = this.id.split("_");
                    var radio_id = r.splice(2,r.length-2).join("_");
                    $(this).attr('src', no_tick_image_path(radio_id))
                });
                $("#" + id).trigger("click");
                $("#tick_img_" + id).attr('src', tick_image_path);
            });

        }

        // if we're deadling with checkboxes
        else if(type == 'checkbox'){

            $("#tick_img_" + id).click(function(){
                $("#" + id).trigger("click");
                if($(this).attr('src') == no_tick_image_path(id)){
                    $(this).attr('src', tick_image_path);
                }
                else {
                    $(this).attr('src', no_tick_image_path(id));
                }

            });

            // if we click on the label
            $("label[for='" + id + "']").click(function(){
                if($("#tick_img_" + id).attr('src') == no_tick_image_path(id)){
                    $("#tick_img_" + id).attr('src', tick_image_path);
                }
                else {
                    $("#tick_img_" + id).attr('src', no_tick_image_path(id));
                }
            });

        }

    });
}

})(jQuery);

$(function() {
    $("input[name='gender']").imageTick({
        tick_image_path: { 
            male: "http://i47.tinypic.com/13yjdac.jpg", 
            female: "http://i49.tinypic.com/261kfia.jpg"
            //"default": "images/gender/default_checked.jpg" //optional default can be used
        },
        no_tick_image_path: { 
            male: "http://i45.tinypic.com/vr4nwy.jpg", 
            female: "http://i47.tinypic.com/2m5mr9s.jpg"
            //"default": "images/gender/default_unchecked.jpg" //optional default can be used
        },
        image_tick_class: "gender",
    });
});

我需要一些说明，例如在哪里粘贴哪些代码(head、body)、要创建什么文件(js、html)以及要更改哪些值，以便它可以工作!有人可以压缩示例或其他东西吗？

Answer 1

我们可以通过在末尾添加 /show/ 来查看 fiddle 的全页版本。

保存this fiddle 的版本。它包含该特定 fiddle 运行所需的所有脚本和资源。

在您的应用程序中比较并满足它们。