이전 버전의 jQuery 스크립트가 최신 버전에서 작동하도록 도움이 필요합니다.

Question

이 스크립트는 문의 할 수없는 다른 사람이 작성했습니다. 이전 버전의 jQuery, 아마도 jQuery 1.3 용으로 작성되었으며 해당 버전에서 완벽하게 작동했습니다. 최신 버전의 jQuery (1.7?)를 사용하는 새 웹 사이트에서 스크립트가 완전히 손상되었습니다.

"$"를 "jQuery"로 바꾸면 대부분 작동합니다. 나는 온라인에서 읽은 모든 자습서와 예제가 사용되는 달러 기호를 보여주기 때문에 왜 그것이 필요한지 알지 못합니다.

그러나 코드에는 여전히 문제가 있습니다. 컨베이어에서 항목을 선택하면 HTML의 라디오 버튼이 변경된 것으로 보이지 않습니다. .prop 대신 .attr을 사용하려고했으나 온라인 설명서에 따라 작동했지만 작동하지 않습니다.

스크립트가 포함 된 아바타 빌더는 계정 편집 페이지에 있습니다. 새 사이트에서 테스트 사용자를 만들었으므로 기꺼이 도와 줄 사람이 누구나 테스트 할 수 있습니다. 현재 로그인 할 수 있습니다 : https://comm7.he2236.vps.webenabled.net/user/login 아이디 : testuser를에게 암호 : jQuery를

계정 편집 링크 : https://comm7.he2236.vps.webenabled.net/user/59/edit

나는 현재 주로 작업 한 코드를, JS는 헤더에 포함 가에서 볼 수 있습니다 foster_avatar_widget.js : comm7.he2236.vps.webenabled.net

function select_avatar(image, button) { 
image.input.prop('checked', true); 
alert(image.input.is(':checked')); 
jQuery('#layer_'+image.id).css({ backgroundImage: "url("+image.url+")" }); 

var src = button.attr("src"); 

button.parent().parent().find("li img").each(
    function(index) { 
     if(jQuery(this).attr("src") == src) 
     jQuery(this).addClass("avatar_select"); 
     else 
     jQuery(this).removeClass("avatar_select"); 
    } 
); 
} 

function unselect_avatar(image, button) { 

image.input.prop('checked', false); 

//select empty 
jQuery('#default_input_'+image.id).prop('checked', true); 

jQuery('#layer_'+image.id).css({ backgroundImage: "none" }); 

var src = button.attr("src"); 

button.parent().parent().find("li img").each(
    function(index) { 
     if(jQuery(this).attr("src") == src) 
     jQuery(this).removeClass("avatar_select"); 
    } 
); 
} 

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt) { 
var data = carousel.data; 

if(!data) { 
    var cid = carousel.list.attr('id').substring(9); 
    var data = new Array(); 
    jQuery('#'+cid+' img').each(
     function(index) { 
      var input = jQuery(this).siblings('input'); 
      var url = jQuery(this).attr('src'); 

      if(input.is(':checked')) { 
        jQuery('#layer_'+cid).css({ backgroundImage: "url("+url+")" });     
      } 

      data.push({id: cid, input: input, image: jQuery(this), url: url}); 
     }); 

    carousel.data = data; 

    jQuery('#user-edit').append('<div class="form-item" style="display:none"><label class="option"><input class="form-radio user_avatar_select" id="default_input_'+cid+'" type="radio" value="none" name="select_avatar_'+cid.substring(cid.lastIndexOf("_") + 1)+'"/></label></div>'); 
} 

var idx = carousel.index(i, data.length); 
var image = data[idx - 1]; 

var img = image.image.clone(); 

if(image.input.is(':checked')) 
    img.addClass("avatar_select"); 

carousel.add(i, img); 

img.hover(
    function(){jQuery(this).addClass("avatar_hover");}, 
    function(){jQuery(this).removeClass("avatar_hover");} 
); 

img.click(
    function() { 
     if(image.input.is(':checked')) 
      unselect_avatar(image, jQuery(this)); 
     else 
      select_avatar(image, jQuery(this)); 
    } 
); 
}; 

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt) 
{ 
carousel.remove(i); 
}; 

function mycarsousel_init(list) { 
if(!list.attr('id')) 
    return; 

jQuery(".picture").append('<div class="avatar_layer" id="layer_'+list.attr('id')+'"></div>'); 

list.append('<ul id="carousel_'+list.attr('id')+'" class="jcarousel-skin-tango"></ul>'); 

jQuery('#carousel_'+list.attr('id')).jcarousel({ 
    scroll: 6, 
    wrap: 'circular', 
    //itemLoadCallback: itemLoadCallbackFunction, 
    itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback}, 
    itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback} 
}); 
} 

jQuery(document).ready(function() { 
    jQuery('div.user_avatar_select').parent().hide(); 

    for(var i=0;i<10;i++) { 
    mycarsousel_init(jQuery('#user_avatars_select_'+i)); 
    } 

    jQuery(".picture #current").css({display: "none"}); 

    jQuery(".picture").css({"position": "relative", "width": "200px", "height": "200px", "background-image": "url(/sites/default/files/default_avatar.gif)"}); 
}); 

JS가 헤더에서 볼 수있는 것을 포함 이전 jQuery를 에 근무하는 코드 : fclub.he2236.vps.webenabled .net

var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1); 
var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1); 

function select_avatar(image, button) { 
image.input.attr("checked", "checked"); 

if (jQuery.browser.msie && (ie55 || ie6)) { 
    $('#layer_'+image.id).css('background-image', 'none'); 
    $('#layer_'+image.id).get(0).runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' + image.url + '\', sizingMethod=\'scale\');'; 
} 
else { 
    $('#layer_'+image.id).css({ backgroundImage: "url("+image.url+")" }); 
} 

var src = button.attr("src"); 

button.parent().parent().find("li img").each(
    function(index) { 
     if($(this).attr("src") == src) 
     $(this).addClass("avatar_select"); 
     else 
     $(this).removeClass("avatar_select"); 
    } 
); 
} 

function unselect_avatar(image, button) { 

image.input.attr("checked", ""); 

//select empty 
$('#default_input_'+image.id).attr("checked", "checked"); 

$('#layer_'+image.id).css({ backgroundImage: "none" }); 

if (jQuery.browser.msie && (ie55 || ie6)) { 
    $('#layer_'+image.id).get(0).runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader none;'; 
} 
else { 
    $('#layer_'+image.id).css({ backgroundImage: "none" }); 
} 

var src = button.attr("src"); 

button.parent().parent().find("li img").each(
    function(index) { 
     if($(this).attr("src") == src) 
     $(this).removeClass("avatar_select"); 
    } 
); 
} 

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt) { 
var data = carousel.data; 

if(!data) { 
    var cid = carousel.list.attr('id').substring(9); 
    var data = new Array(); 
    $('#'+cid+' img').each(
     function(index) { 
      var input = $(this).siblings('input'); 
      var url = $(this).attr('src'); 

      if(input.attr("checked")) { 
       if (jQuery.browser.msie && (ie55 || ie6)) { 
        $('#layer_'+cid).css('background-image', 'none'); 
        $('#layer_'+cid).get(0).runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' + url + '\', sizingMethod=\'scale\');'; 
       } 
       else { 
        $('#layer_'+cid).css({ backgroundImage: "url("+url+")" }); 
       } 

      } 

      data.push({id: cid, input: input, image: $(this), url: url}); 
     }); 

    carousel.data = data; 

    $('#user-edit').append('<div class="form-item" style="display:none"><label class="option"><input class="form-radio user_avatar_select" id="default_input_'+cid+'" type="radio" value="none" name="select_avatar_'+cid.substring(cid.lastIndexOf("_") + 1)+'"/></label></div>'); 
} 

var idx = carousel.index(i, data.length); 
var image = data[idx - 1]; 

var img = image.image.clone(); 

if(image.input.attr("checked")) 
img.addClass("avatar_select"); 

carousel.add(i, img); 

img.hover(
    function(){$(this).addClass("avatar_hover");}, 
    function(){$(this).removeClass("avatar_hover");} 
); 

img.click(
    function() { 
     if(image.input.attr("checked")) 
     unselect_avatar(image, $(this)); 
     else 
     select_avatar(image, $(this)); 
    } 
); 
}; 

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt) 
{ 
    carousel.remove(i); 
}; 

function mycarsousel_init(list) { 
if(!list.attr('id')) 
return; 

$(".picture").append('<div class="avatar_layer" id="layer_'+list.attr('id')+'"></div>'); 

list.append('<ul id="carousel_'+list.attr('id')+'" class="jcarousel-skin-tango"></ul>'); 

$('#carousel_'+list.attr('id')).jcarousel({ 
    scroll: 6, 
    wrap: 'circular', 
    itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback}, 
    itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback} 
}); 
} 

if (Drupal.jsEnabled) { 
$(document).ready(function() { 

    $('div.user_avatar_select').parent().hide(); 

    for(var i=0;i<10;i++) 
    mycarsousel_init($('#user_avatars_select_'+i)); 

    $(".picture #current").css({display: "none"}); 

    $(".picture").css({"position": "relative", "width": "200px", "height": "200px", "background-image": "url(/files/default_avatar.gif)"}); 


    if (jQuery.browser.msie && (ie55 || ie6)) { 
    $(".avatar_layer").each(function() { 
     //alert(jQuery(this).css('background-image')); 
     //$(this).css('background-image', 'none'); 
     //$(this).get(0).runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' + image.url + '\', sizingMethod=\'scale\');'; 
    }); 
} 
}); 
} 

Answer 1

문제를 찾을 도움이 될

(function ($) { 
    // Your code here 
})(jQuery); 

희망 : 드루팔 7에서 jQuery(image).input.attr('checked', true); , 항상 그렇지 않으면, 당신은 당신의 코드를 포장 할 필요가 jQuery를() 대신 $()의를 사용합니다. D6에서 D7 버전의 페이지와 다른 HTML로 인해 발생했습니다. JavaScript와 jQuery에는 실제로 그 차이점을 보완하지 않는다는 점을 제외하면 실제로 아무런 문제가 없습니다.

Answer 2

jQuery()로 요소를 래핑 해보십시오. 예 :이 당신