關於函數相對論的jQuery

我有一個兩個函數，只有當我點擊某個元素時才起作用。例如：關於函數相對論的jQuery

$(".item-image").click(function() { 

    $('#close-zoom').show(); 
    $('.item-image-box').attr('class', 'item-image-box-zoom'); 
    $('.item-image').attr('class', 'item-image-zoom'); 
    var main_img_src = document.getElementById('main_image_src').src; 
    start_srt_index = main_img_src.lastIndexOf("."); 
    main_img_src_ext = main_img_src.substring(start_srt_index, start_srt_index + 4); 
    var new_main_img_src; 
    if (main_img_src_ext == '.jpg') new_main_img_src = main_img_src.substring(start_srt_index, 0) + '.jpg'; 
    else if (main_img_src_ext == '.jpe') new_main_img_src = main_img_src.substring(start_srt_index, 0) + '.jpeg'; 
    else if (main_img_src_ext == '.png') new_main_img_src = main_img_src.substring(start_srt_index, 0) + '.png'; 
    $('#main_image_src').attr('id', 'draggable') 

    $('#draggable').attr("src", new_main_img_src); 


    $('#draggable').load(function() { 

     if ($("#draggable").width() > 980 && $("#draggable").height() > 480) { 
      var width_marg = ($("#draggable").width() - 980); 
      var height_marg = ($("#draggable").height() - 480); 
      $("#containment-wrapper").width($("#draggable").width() + width_marg); 
      $("#containment-wrapper").height($("#draggable").height() + height_marg); 
      $("#containment-wrapper").css('marginLeft', -width_marg); 
      $("#containment-wrapper").css('marginTop', -height_marg); 


      $("#draggable").draggable({ 
       containment: "#containment-wrapper", 
       scroll: false 
      }); 
     } 
     else { 
      var width_marg = ($("#draggable").width() - 980)/2; 
      var height_marg = ($("#draggable").height() - 480)/2; 
      $("#containment-wrapper").width($("#draggable").width()); 
      $("#containment-wrapper").height($("#draggable").height()); 
      $("#containment-wrapper").css('marginLeft', -width_marg); 
      $("#containment-wrapper").css('marginTop', -height_marg); 
     } 
    }); 

    $('.item-previews-box').attr('class', 'item-big-previews-box'); 
    $('.preview').attr('class', 'preview-zoom'); 
    $('.item-big-description').attr('class', 'item-big-description item-big-description-zoom'); 

});

這項工作的圖像改變到一個更大的，我有一個第二函數具有反向作用，它加載一個正常大小的圖像

$("#close-zoom").click(function() { 
    $('#close-zoom').hide(); 
    $('.item-image-box-zoom').attr('class', 'item-image-box'); 
    $('.item-image-zoom').attr('class', 'item-image'); 
    var main_img_src = document.getElementById('draggable').src; 
    start_srt_index = main_img_src.lastIndexOf("."); 
    main_img_src_ext = main_img_src.substring(start_srt_index, start_srt_index + 4); 
    var new_main_img_src; 
    if (main_img_src_ext == '.jpg') new_main_img_src = main_img_src.substring(start_srt_index, 0) + '.jpg'; 
    else if (main_img_src_ext == '.jpe') new_main_img_src = main_img_src.substring(start_srt_index, 0) + '.jpeg'; 
    else if (main_img_src_ext == '.png') new_main_img_src = main_img_src.substring(start_srt_index, 0) + '.png'; 
    $('#draggable').attr('id', 'main_image_src') 


    $('#main_image_src').attr("src", new_main_img_src); 
    $("#containment-wrapper").css('marginLeft', 0); 
    $("#containment-wrapper").css('marginTop', 0); 

    $('.item-big-previews-box').attr('class', 'item-previews-box'); 
    $('.preview-zoom').attr('class', 'preview'); 
    $('.item-big-description-zoom').attr('class', 'item-big-description'); 

});

此功能位於

$(document).ready(function(){ 
});

我是個大問題：爲什麼當我使用功能近距離放大的一部分位於第一功能：

$('#draggable').load(function() {...});

正在執行，並在id＃containment-wrapper中更改我的參數。我認爲這個功能是獨立的。可能我失去了一些重要的方面？我怎樣才能使這些功能彼此不相關（在這種情況下，函數.item-image與.close-zoom相關）。這是我的第一個複雜（對我來說）基於jQuery的函數集。感謝您的關注。

來源

2012-11-12 Dima Deplov

如果你想保持你原有的功能結構中的其他功能中此功能，這樣做..

相反的

$('#draggable').load(function() {});

綁定負載函數這樣

$('body').on('load', '#draggable', function() {});

然後在第二個函數的第一行，解除綁定。對（「負載」）像這樣功能..

$('body').off('load', '#draggable');

Ultimitely此方法將切換。對（「負載」）函數（上和關閉）你的兩個主要功能:)

來源

2012-11-12 19:05:48 VIDesignz

我可以使用第一個響應中的函數並添加到此答案中嗎？像這樣：$（'body'）。on（'load'，'#draggable'，resizedraggable（））; ？ –

是的，但它應該寫成沒有括號這樣的$（'body'）。on（'load'，'#draggable'，resizedraggable）; – VIDesignz

然後，解除.on（'load'）它應該寫成像這樣$（'body'）。off（'load'，'#draggable'，resizedraggable）; – VIDesignz

這是因爲.load（）綁定爲可拖動的。任何時候，可拖動的重新加載，它將再次觸發加載函數。

在你的第一個功能，你有這...

$('#draggable').load(function() {});

然後在你的第二個功能，你有這...這是觸發$（「＃拖動」）。負載（函數（）{}）;函數

// This is loading $('#draggable') which is triggering the .load() function again 
    $('#draggable').attr('id', 'main_image_src') 
    $('#main_image_src').attr("src", new_main_img_src);

不要將.load（）綁定到可拖動元素。做一個獨立的功能爲.load（）

function resizedraggable() { 

    if ($("#draggable").width() > 980 && $("#draggable").height() > 480) { 
     var width_marg = ($("#draggable").width() - 980); 
     var height_marg = ($("#draggable").height() - 480); 
     $("#containment-wrapper").width($("#draggable").width() + width_marg); 
     $("#containment-wrapper").height($("#draggable").height() + height_marg); 
     $("#containment-wrapper").css('marginLeft', -width_marg); 
     $("#containment-wrapper").css('marginTop', -height_marg); 


     $("#draggable").draggable({ 
      containment: "#containment-wrapper", 
      scroll: false 
     }); 
    } 
    else { 
     var width_marg = ($("#draggable").width() - 980)/2; 
     var height_marg = ($("#draggable").height() - 480)/2; 
     $("#containment-wrapper").width($("#draggable").width()); 
     $("#containment-wrapper").height($("#draggable").height()); 
     $("#containment-wrapper").css('marginLeft', -width_marg); 
     $("#containment-wrapper").css('marginTop', -height_marg); 
    } 
}

然後調用必要時

來源

2012-11-12 18:14:10 VIDesignz

不錯，這解決了我描述的問題，但有另一種這樣的方式：function resizedraggable必須在圖像加載後執行，另一種方式$（「＃draggable」） .width（）= 0，這個函數沒有意義。我如何解決它？感謝您的答覆。 –

@flinth檢查我的第二個答案，這與您的原始功能結構一起工作。 – VIDesignz

關於函數相對論的jQuery

回答

相關問題