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(){
});

我的最大问题是：为什么当我使用函数close-zoom位于第一个函数中的部分时：

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

正在执行，并在id＃containment-wrapper中更改我的参数。我认为这个功能是独立的。可能是我失去了一些重要方面？我如何使这些函数彼此不相关（在当前情况下函数.item-image与.close-zoom有关）。这是我的第一个复杂（当然对我来说）基于jQuery的函数集。谢谢你的关注。

Answer 1

这是因为.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（）绑定到draggable元素。为.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);
    }
}

然后在必要时在其他功能中调用此功能

Answer 2

如果您想保留原始功能结构，请执行此操作..

而不是

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

以这种方式绑定加载函数

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

然后作为第二个函数的第一行，取消绑定.on（'load'）函数，就好了。

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

这将在你的两个主要功能之间切换.on（'加载'）功能（开启和关闭）:)

关于函数相关性的jQuery

2 个答案: