javascript - 使用 JS/jquery 选择多个图像

Question

我在网页上使用 Gridster。小部件上有图像。可以使用 + 和 X 按钮添加和删除这些图像。

当前状态

当我按+时，会打开一个模式，用户可以在其中添加多个图像，然后单击添加图像，这些图像将添加到小部件上。这部分工作正常。

单击图像时，class = "preset" 将添加到图像所在的 div 中。此类会突出显示所选图像。

当用户再次单击同一图像时，该类将从该图像中删除。

我还添加了一个 removeclass 函数(该函数从所有包含图像的 div 中删除该类)，当单击 Add Image 或关闭模式时会调用该函数模态右上角有 close 按钮或 X 按钮

问题

当我第一次添加图像时，代码的行为符合预期。

当我第二次添加图像时(在同一个小部件或任何其他小部件中)，图像根本不会突出显示/选择，但如果我单击“添加图像”按钮，以前的图像将添加到小部件。

当我第二次关闭它并再次单击 + 按钮第三次添加图像时，输出符合预期(图像突出显示，相同的图像添加到小部件等)

总而言之，代码在 1、3、5 ...... 时间内工作正常，但在 2、4、6 ...... 时间内工作正常

当我看到输出时

 console.log("In remove");
 console.log(selectedImageSRC);

和

console.log("In add");
 console.log(selectedImageSRC);

当我运行代码 1、3、5 ...... 次时，我发现它符合预期。

但是2、4、5次就很奇怪了。

我在控制台中发现的怪异

if 和 else 两者都被执行，这是下面函数一的一部分

我的功能1

    //Adding Images from Modal
    var parentLI;
    var selectedImageSRC = "";

   $(document).on("click", ".addmorebrands", function() {
        parentLI = $(this).closest('li');
        $('#exampleModalCenter').modal('show');
        $('#exampleModalCenter img').click(function(){
        parentdiv = $(this).closest('div.outerdiv');
        if (parentdiv.hasClass('preselect')) {                     //this if is executed in 2, 4, 5 time of code 

            parentdiv.removeClass('preselect');
            selectedImageSRC = selectedImageSRC.replace($(this).attr('src'),"");
            selectedImageSRC = trimChar(selectedImageSRC, ',');
            selectedImageSRC = (selectedImageSRC.replace(/,,/g , ","));
            console.log("In remove");
            console.log(selectedImageSRC);
            console.log("Parent Div in remove");
            console.log(parentdiv);
        }else {    //at same time (2, 4, 6 time of code execution) this else also get executed

            parentdiv.addClass('preselect');

            if (selectedImageSRC === '') {

                selectedImageSRC += $(this).attr('src');

            } else {

                selectedImageSRC += ',' + $(this).attr('src');
            }

            console.log("In add");
            console.log(selectedImageSRC);
            console.log("Parent Div in Add");
            console.log(parentdiv);
        }     


        })    



    }); 

我的功能2

 $('#add-image').click(function(){

        console.log("In add image");
        console.log(selectedImageSRC);
        var multipleImageSRC = "";
        multipleImageSRC = selectedImageSRC.split(',');
        console.log("Splitted Images");
        console.log(multipleImageSRC);
        var multipleImages = "";
        for(var j = 0; j < multipleImageSRC.length; j++) {
            {% load static %}
            multipleImages += '<div class="imagewrap"><img class="images" src="'+multipleImageSRC[j]+'" title="Manual Addition"> <input type="button" class="removediv" value="X" /></div>'
            console.log("Multiple Images SRC");
            console.log(multipleImages);
        }


        parentLI.append(multipleImages);



        var imageNameValue = parentLI.children('.imagenames').val();
        var imageTitleValue = parentLI.children('.hoverinformation').val();

        //Loop for Updating Textarea with ImageNames
        var imageNameInTextarea = "";
        for (var j = 0; j < multipleImageSRC.length; j++) {

            imageNameInTextarea += multipleImageSRC[j].replace("/static/images/brands/","") + ",";

        }

        //To remove last ',' after the names
        imageNameInTextarea = trimChar(imageNameInTextarea, ',');
        console.log(imageNameInTextarea);

        //Loop calculating lenght of number of images added and correspondingly putting "Manual Addition"

        manualAddition = "";

        for (var j = 0; j < multipleImageSRC.length; j++) {

            manualAddition += "Manual Addition" + ",";

        }

        //To remove last ',' after the names
        manualAddition = trimChar(manualAddition, ',');

        console.log("Manual Textarea");
        console.log(manualAddition);

        if (imageNameValue === '') {
            parentLI.children('.imagenames').val(imageNameInTextarea);
        } else {
            parentLI.children('.imagenames').val(imageNameValue + ',' + imageNameInTextarea);
        }


        if (imageTitleValue === '') {
            parentLI.children('.hoverinformation').val(manualAddition);
        } else {
            parentLI.children('.hoverinformation').val(imageTitleValue + ',' + manualAddition);
        }


        $('#exampleModalCenter').modal('hide');
        removeclasses()



    });

函数移除类

function removeclasses() {
       //Removing preselect class from all the div's when close button or add brand button is clicked.

       a = $('div .outerdiv').removeClass('preselect');
       selectedImageSRC = "";
       console.log(a);

    }

Fiddle

我知道这是一篇很长的文章。抱歉，但我已尽力解释我遇到的每一件事。

Answer 1

您的代码有问题，

在单击第二个添加图像按钮 + 选项时多次调用您的点击事件。

$(document).on("click", ".addmorebrands", function() {
        parentLI = $(this).closest('li');
        $('#exampleModalCenter').modal('show');
        $('#exampleModalCenter img').click(function(){
        parentdiv = $(this).closest('div.outerdiv');
        if (parentdiv.hasClass('preselect')) {                     //this if is executed in 2, 4, 5 time of code 

            parentdiv.removeClass('preselect');
            selectedImageSRC = selectedImageSRC.replace($(this).attr('src'),"");
            selectedImageSRC = trimChar(selectedImageSRC, ',');
            selectedImageSRC = (selectedImageSRC.replace(/,,/g , ","));
            console.log("In remove");
            console.log(selectedImageSRC);
            console.log("Parent Div in remove");
            console.log(parentdiv);
        }else {    //at same time (2, 4, 6 time of code execution) this else also get executed

            parentdiv.addClass('preselect');

            if (selectedImageSRC === '') {

                selectedImageSRC += $(this).attr('src');

            } else {

                selectedImageSRC += ',' + $(this).attr('src');
            }

            console.log("In add");
            console.log(selectedImageSRC);
            console.log("Parent Div in Add");
            console.log(parentdiv);
        }     

    });
}); 

这段代码应该像下面这样。

   $(document).on("click", ".addmorebrands", function() {
        parentLI = $(this).closest('li');
        $('#exampleModalCenter').modal('show');
    });

    $('#exampleModalCenter img').click(function(){
        parentdiv = $(this).closest('div.outerdiv');
        if (parentdiv.hasClass('preselect')) {

            parentdiv.removeClass('preselect');
            selectedImageSRC = selectedImageSRC.replace($(this).attr('src'),"");
            selectedImageSRC = trimChar(selectedImageSRC, ',');
            selectedImageSRC = (selectedImageSRC.replace(/,,/g , ","));
            console.log("In remove");
            console.log(selectedImageSRC);
            console.log("Parent Div in remove");
            console.log(parentdiv);
        }else {

            parentdiv.addClass('preselect');

            if (selectedImageSRC === '') {

                selectedImageSRC += $(this).attr('src');

            } else {

                selectedImageSRC += ',' + $(this).attr('src');
            }

            console.log("In add");
            console.log(selectedImageSRC);
            console.log("Parent Div in Add");
            console.log(parentdiv);
        }     
});