jQuery关于函数相对论

Question

我有两个功能，只有当我点击某个元素时才起作用。例如：

$(".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 的函数集。 感谢关注。

Answer 1

如果你想保持你原来的函数结构，这样做..

代替

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

这样绑定加载函数

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

然后作为第二个函数的第一行，像这样取消绑定 .on('load') 函数..

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

最终这将在两个主要功能之间切换 .on('load') 功能（打开和关闭）:)

Answer 2

这是因为 .load() 绑定到可拖动的。任何时候重新加载draggable，都会再次触发加载函数。

在你的第一个函数中，你有这个......

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

然后在你的第二个函数中，你有这个......它正在触发 $('#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);
    }
}

然后在需要的时候在其他函数中调用这个函数