Refactoring Code to jQuery 1.3.2

Question

클라이언트 용으로 작성한 코드가 있으며 현재 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에서 작동하지 않아야 할 다른 것을 찾을 수 없습니다.

/* ============================================================= 
* 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)); 

Answer 1

플러그인 중 일부는 이전 버전을 통해 실행해야해서 당신이 이전 버전에 기존의 코드를 변환하는 경우 :

http://jsfiddle.net/dvw9F/

다음은 작동하지 않는 코드입니다. 나는 그렇게하지 않는 것이 좋습니다. 이것에 대해 아무런 단서도 없었다

<!-- 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();