Как сделать так, чтобы уже в выполненной функции переменные не менялись?

Question

Помогите решить задачу.

function start(){
    
    id = random(5);
    id = 'здесь генерирую рандомный id из из 5-ти англ. букв'; 
    
    //создаю новый элемент
    jQuery('body').append('<div id="'+id+'" >блок '+id+'</div>');
    
    jQuery(document).mousedown(function(e){
        //если клик не по этому блоку и не по его детям
        if(!jQuery('#'+id).is(e.target) && jQuery('#'+id).has(e.target).length === 0){
            //удалить его
            jQuery('#'+id).remove();
        }
    })
}

С помощью этой функции я создаю всплывающие окна. Просто для примера я упростил все, сжав до сути. Функция создает новый элемент с уникальным ID. Если кликаешь не по этому элементу и не по его детям, элемент удаляется. Проблема заключается в том, что если выполнить эту функцию 1 раз - все хорошо, а если сразу 2-3 раза, создав несколько элементов, то "клик не по этому блоку" срабатывает только с последим созданным элементом.

Я понимаю, что у меня в коде логическая ошибка, ведь переменную id я постоянно меняю. Но как сделать чтобы уже в выполненной функции переменные оставались собой, как были и не заменялись. Я понимаю, что задаю идиотский вопрос, но я даже поисковику не могу понять как объяснить что мне нужно чтобы найти решение. Спасибо)

Answer 1

Одна переменная может хранить только одно значение) Если надо запомнить все - нужен массив.

Если кликнуть на один из блоков - удалятся все, кроме него.
Если вне всех блоков - удалятся все:

let id_storage = []; // Все созданные id хранятся в массиве.

for (let i = 0; i < 5; i++) start();

function start() {
  let id = "_" + ("" + Math.random()).slice(-5); // Рандомный id.
  
  $('body').append('<div id="' + id + '">' + id + '</div>');
  
  id_storage.push( id ); // При создании, добавляется в массив.
}

// * Обработчик создается один раз, а не при каждом вызове start.
$(document).on("click", function(e) {
  let $target = $(e.target);
  
  for (let i = id_storage.length - 1; i >= 0; i--) {
    let id = id_storage[i];
    
    // В цикле, для каждого id проверяется:
    if ( $target.closest("#" + id).length == 0 ) {
      // Кликнутый элемент, или любой из его родителей не совпадает с ("#" + id) ?
      
      $("#" + id).remove(); // Удалить элемент,
      id_storage.splice(i, 1); // И его id из хранилища.
    }
  }
});

div[id] { display: inline-block; width: 50px; height: 50px; margin: 10px; background: orange }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Вы пишете значение id в глобальную/внешнюю переменную. То есть в одну и ту же.

function start(){
    
    var id = ...
    ^^^

БЛОГ НА HUSL

Как сделать так, чтобы уже в выполненной функции переменные не менялись?

Ответы (2 шт):