Создание массива для var

Question

Это должно закрыть любые div, перечисленные в массиве, когда вы щелкаете по сторонам те divs, но он не работает.

Если бы я должен был щелкнуть в любом месте, где не было div1, div2, div3, div4, тогда все те divs должны закрыться.

$(document).mouseup(function (e) 
{ 
    var container = $["#div1," "#div2", "#div3", "#div4"]; 

    if (!container.is(e.target) 
     && container.has(e.target).length === 0) 
    { 
     container.hide(); 
    } 
}); 

я могу заставить его работать на отдельных дивы в своих собственных тегов сценария, но тогда я должен воспроизвести этот код несколько раз, что не очень аккуратно.

$(document).mouseup(function (e) 
{ 
    var container = $("#div1"); 

    if (!container.is(e.target) 
     && container.has(e.target).length === 0) 
    { 
     container.hide(); 
    } 
}); 
$(document).mouseup(function (e) 
{ 
    var container = $("#div2"); 

    if (!container.is(e.target) 
     && container.has(e.target).length === 0) 
    { 
     container.hide(); 
    } 
}); 
$(document).mouseup(function (e) 
{ 
    var container = $("#div3"); 

    if (!container.is(e.target) 
     && container.has(e.target).length === 0) 
    { 
     container.hide(); 
    } 
}); 
$(document).mouseup(function (e) 
{ 
    var container = $("#div4"); 

    if (!container.is(e.target) 
     && container.has(e.target).length === 0) 
    { 
     container.hide(); 
    } 
}); 

Какое правильное решение для группировки этих #divs?

Answer 1

Ваш селектор неправильно - использовать круглые скобки и поставить все разделенные запятой идентификаторы в кавычках, как это:

var container = $("#div1, #div2, #div3, #div4"); 

Тогда все функции, касающиеся container переменной будет влиять на все эти элементы.

Answer 2

Попробуйте это:

$(document).mouseup(function (e) 
{ 
    var container = ["#div1", "#div2", "#div3", "#div4"]; 
    for(var i=0;i<container.length;i++) 
{ 
    if (!$(container[i]).is(e.target) 
    && $(container[i]).has(e.target).length === 0) 
    { 
    $(container[i]).hide(); 
    } 
} 
}); 

Answer 3

Вы можете сделать это таким образом.

JS:

$(document).not($("#div1, #div2, #div3, #div4")).on('click',function(){ 

    $(".test").hide(); 

}) 

HTML:

<div id="div1" class="test" style="background-color:red">111</div> 
<div id="div2" class="test" style="background-color:blue">22</div> 
<div id="div3" class="test" style="background-color:green">333</div> 
<div id="div4" class="test" style="background-color:black">444</div> 

<div id="div5" style="background-color:black">44455555555</div>