同一Django temp中的Javascript变量

Question

在我的django应用程序中有一个javascript模式，它从后端检索所有可用的图像

在应用程序中，我有Gridster小部件，上面已经有一些通过JSON上传的图像

在每个按钮上都有一个+按钮，用于打开模式窗口，用户可以在单击+按钮的小部件上添加图像

当前状态

当我单击+按钮时打开的模式当前具有所有图像。自从小部件上有图像，我不希望这些图像出现在模式中。你知道吗

所需输出

我要模态更新实时的所有可用的图像模式应该只显示小部件上不存在的图像。你知道吗

到目前为止我所做的

小部件上的图像的名称在textarea上小工具.As一旦我删除一个图像，该图像的名称就会从textarea中删除。你知道吗

在js中，我提取textarea的内容，并将其从从模板发送的django变量中删除（该变量中包含所有图像的名称）

因此，结果变量filteredBrands是一个具有特定小部件上不存在的图像名称的变量。你知道吗

我不知道如何在循环中传递这个变量，循环当前正在获取所有图像，以便只渲染那些不在特定小部件上的图像。你知道吗

生成filteredBrands变量的JS函数

 var parentLI;
    var selectedImageSRC = "";
    var imageNameValue;
    var brandsFromBackend;

    $(document).on("click", ".addmorebrands", function() {
        parentLI = $(this).closest('li');                         //Getting the widget in which on which the + button is pressed   
        imageNameValue = parentLI.children('.imagenames').val();   //Getting list existing of images which are there on widget from the textarea
        brandsFromBackend = document.getElementById("myVar").value;  //Getting the django template variable having all the images
        brandsFromBackend = brandsFromBackend.replace(/'/g, '"');    
        brandsFromBackend = JSON.parse(brandsFromBackend);    //Converting django variable to JS array
        console.log(brandsFromBackend);
        ////Convert brands on widget to filteredBrands 
        imageNameValueArray = imageNameValue.split(',')       //Converting the textarea(existing images list) content to list           
       console.log(imageNameValueArray);

         //Loop that removes the images which are present on widgets from the array having all the images(django variable JS array)
         var filteredBrands = brandsFromBackend; 
        console.log(filteredBrands);

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

                for (var i=filteredBrands.length-1; i>=0; i--) {
                    if (filteredBrands[i] === imageNameValueArray[j]) {
                        filteredBrands.splice(i, 1);
                        // break;       //<-- Uncomment  if only the first term has to be removed
                    }
                }
        }


        console.log("filteredBrands");
        console.log(filteredBrands);

        brandsFiltered = JSON.stringify(filteredBrands);
        console.log(brandsFiltered);            //Final list of filtered images which are to be shown in the modal. I want to pass this variable to

        $('#exampleModalCenter').modal('show');
    });

循环，该循环为模式生成图像

  {% for file in brands %}  
        {% load static %}
            <div class="outerdiv"><img class="img-fl" src="{% get_static_prefix %}images/brands/{{file}}" alt=""></div>
        {% endfor %}

brands是我发送的变量视图.py（里面有所有的图像它。在这里我想要filteredBrands（只有那些不在widget上并且在同一个模板的JS中生成的图像）

我得到品牌的HTML

<input type="hidden" id="myVar" name="variable" value="{{ brands }}">

要想了解整件事，请看一下这个Fiddle。它并不完全反映我的应用程序（因为我有django），但我希望它至少能帮助了解其他事情。你知道吗

更新1

请有人帮我，因为我甚至不确定这是否可行/正确的方法。我完全不知道这一点