0

我有一些我正在为客户编写的代码,他们目前正在使用 Drupal 6 和 jQuery 1.3.2 - 我无法控制他们使用的 jQuery,所以我试图根据这个假设编写一些代码它不会很快改变。我一直在重新编写代码,现在它可以追溯到 1.4 版本,但我遇到了一堵砖墙,试图让它在 1.3 版本上运行。

我正在使用 FlatUI 的单选按钮 - 原版在这里(https://raw.github.com/designmodo/Flat-UI/master/js/flatui-radio.js) - 我已经重新设计了它但找不到什么阻止它触发。

我已经设置了一个 JSFiddle 来演示我的问题。除了年龄选择部分,每个年龄(13+、14+ 等)的左侧应该有复选框之外,一切都工作正常。正如我所说,它可以追溯到 1.4,甚至查看 jQuery 文档,我找不到任何其他不应该在 1.3 上工作的东西。

http://jsfiddle.net/dvw9F/

这是不起作用的代码:

/* =============================================================
* flatui-radio.js v0.0.3
* ============================================================ */

(function ($) {

'use strict';

/* RADIO PUBLIC CLASS DEFINITION
* ============================== */

var Radio = function (element, options) {
    this.init(element, options);
};

Radio.prototype = {

    constructor: Radio,

    init: function (element, options) {

        var $el = this.$element = $(element);

        this.options = $.extend({}, $.fn.radio.defaults, options);
        $el.before(this.options.template);
        this.setState();

    },

    setState: function () {

        var $el = this.$element,
            $parent = $el.closest('.radio');

        if ($el.attr('disabled') === true) {
            $parent.addClass('disabled');
        }

        if ($el.attr('checked') === true) {
            $parent.addClass('checked');
        }

    },

    toggle: function () {

        var d = 'disabled',
            ch = 'checked',
            $el = this.$element,
            checked = false,
            $parent = $el.closest('.radio'),
            $parentWrap = $el.closest('form').length ? $el.closest('form') : $el.closest('body'),
            $elemGroup = $parentWrap.find(':radio[name="' + $el.attr('name') + '"]'),
            e = $.Event('toggle');

        if ($el.attr(ch) === true) {
            checked = true;
        }

        $elemGroup.not($el).each(function () {

            var $el = $(this),
                $parent = $(this).closest('.radio');

            if ($el.attr(d) !== true) {
                $parent.removeClass(ch) && $el.removeAttr(ch).trigger('change');
            }

        });

        if ($el.attr(d) !== true) {

            if (checked === false) {
                $parent.addClass(ch) && $el.attr(ch, true);
            }

            $el.trigger(e);

            if (true !== $el.attr(ch)) {
                $el.trigger('change');
            }

        }

    },

    setCheck: function (option) {

        var ch = 'checked',
            $el = this.$element,
            $parent = $el.closest('.radio'),
            checkAction = option === 'check' ? true : false,
            checked = false,
            $parentWrap = $el.closest('form').length ? $el.closest('form') : $el.closest('body'),
            $elemGroup = $parentWrap.find(':radio[name="' + $el.attr('name') + '"]'),
            e = $.Event(option);

        if ($el.attr(ch) === true) {
            checked = true;
        }

        $elemGroup.not($el).each(function () {

            var $el = $(this),
                $parent = $(this).closest('.radio');

            $parent.removeClass(ch) && $el.removeAttr(ch);

        });

        $parent[checkAction ? 'addClass' : 'removeClass'](ch) && checkAction ? $el.attr(ch, ch) : $el.removeAttr(ch);
        $el.trigger(e);

        if (checked !== $el.attr(ch)) {
            $el.trigger('change');
        }

    }

};

/* RADIO PLUGIN DEFINITION
* ======================== */

var old = $.fn.radio;

$.fn.radio = function (option) {

    return this.each(function () {

        var $this = $(this),
            data = $this.data('radio'),
            options = $.extend({}, $.fn.radio.defaults, $this.data(), typeof option === 'object' && option);

        if (!data) {
            $this.data('radio', (data = new Radio(this, options)));
        }

        if (option === 'toggle') {
            data.toggle();
        }

        if (option === 'check' || option === 'uncheck') {
            data.setCheck(option);
        } else if (option) {
            data.setState();
        }

    });

};

$.fn.radio.defaults = {
    template: '<span class="icons"><span class="first-icon fui-radio-unchecked"></span><span class="second-icon fui-radio-checked"></span></span>'
};

/* RADIO NO CONFLICT
* ================== */

$.fn.radio.noConflict = function () {

    $.fn.radio = old;
    return this;

};

/* RADIO DATA-API
* =============== */

$('.radio').live('click', '[data-toggle^=radio], .radio', function (e) {

    var $radio = $(e.target);

    if (e.target.tagName !== "A") {

        e && e.preventDefault() && e.stopPropagation();
        if (!$radio.hasClass('radio')) {
            $radio = $radio.closest('.radio');
        }

        $radio.find(':radio').radio('toggle');

    }

});

$(function () {

    $('[data-toggle="radio"]').each(function () {
        var $radio = $(this);
        $radio.radio();
    });

});

}(jQuery));
4

1 回答 1

3

如果您只是因为某些插件需要在旧版本上运行而将现有代码转换为以前的版本。我建议你不要这样做。

您可以在同一页面上使用不同的版本,因此无需更新现有代码:

<!-- load jQuery version 1.9.0 -->
<script src="jquery-1.9.0.js" type="text/javascript"></script>
<script type="text/javascript">
var $jQuery1_9 = $.noConflict(true);// Here you must need to pass true
                                    //else it will only free $ variable
                                    //and using jQuery with blow libraries
                                    //cause conflict
</script>

//you must load second library later after initializing
//first instance of version and freeup jQuery keyword
//else jQuery keyword will
//cause conflict it you uplaoded both files.

<!-- load jQuery version 1.10.0 -->
<script src="jquery-1.10.0.js" type="text/javascript"></script>
<script type="text/javascript">
var $jQuery1_10 = $.noConflict(true);
</script>

//so now here $ and jQuery both cannot be used

//using $jQuery1_10 will call version 1.10.0 library code
$jQuery1_10( "div p" ).show();

//using $jQuery1_9 will call version 1.9.0 library code
$jQuery1_9( "div p" ).show();
于 2013-12-09T13:05:57.663 回答