JQuery在外部點擊時隱藏了多個具有相似ID的div

我想隱藏所有div與id類似，如果沒有點擊任何這些div的。在我的代碼中，它僅適用於第一個div，因爲我使用index[0]來獲取該ID。我想推廣它爲所有的id工作。JQuery在外部點擊時隱藏了多個具有相似ID的div

下面是代碼：

$(window).click(function(e) { 
 
    if (e.target.id != $('[id^=div_]')[0].id) { 
 
    $('[id^=div_]').hide(); 
 
    } 
 
});

div { 
 
    height: 150px; 
 
    width: 150px; 
 
    display: inline-block; 
 
    background: green; 
 
    margin: 10px; 
 
    color: #fff; 
 
    text-align: center; 
 
    line-height: 150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="div_1">One</div> 
 
<div id="div_2">Two</div> 
 
<div id="div_3">Three</div> 
 
<div id="div_4">Four</div>

FIDDLE

來源

2017-04-27 shubham agrawal

添加一個類，並隱藏所有的類。 – Paddy

所以你不想隱藏任何div如果他們被點擊？你在問什麼？爲什麼不使用類/名稱 –

@ A.Lau是的我想隱藏他們，如果點擊外面。 –

這裏的簡單的解決方法是使用一個通用類上的所有元素。然後，您可以使用is()來確定e.target是否是其中一個元素，並根據需要隱藏/顯示它們。試試這個：

$(window).click(function(e) { 
 
    if (!$(e.target).is('.div')) { 
 
    $('.div').hide(); 
 
    } 
 
});

div { 
 
    height: 150px; 
 
    width: 150px; 
 
    display: inline-block; 
 
    background: green; 
 
    margin: 10px; 
 
    color: #fff; 
 
    text-align: center; 
 
    line-height: 150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="div_1" class="div">One</div> 
 
<div id="div_2" class="div">Two</div> 
 
<div id="div_3" class="div">Three</div> 
 
<div id="div_4" class="div">Four</div>

我不能在HTML的任何更改，如增加類

在這種情況下，你可以檢查id點擊的元素，看它是否從div_開始。如果沒有，那麼隱藏所有的div，像這樣：

$(window).click(function(e) { 
 
    if (e.target.id.indexOf('div_') != 0) { 
 
    $('[id^=div_]').hide(); 
 
    } 
 
});

div { 
 
    height: 150px; 
 
    width: 150px; 
 
    display: inline-block; 
 
    background: green; 
 
    margin: 10px; 
 
    color: #fff; 
 
    text-align: center; 
 
    line-height: 150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="div_1" class="div">One</div> 
 
<div id="div_2" class="div">Two</div> 
 
<div id="div_3" class="div">Three</div> 
 
<div id="div_4" class="div">Four</div>

來源

2017-04-27 06:41:50

問題是我無法在HTML中進行任何更改。我無法在HTML中添加任何課程 –

好的 - 我爲你更新了答案 –

感謝它的工作。偉大的解決方案。沒有想到它。 –

-1

嘿，你可以使用這個功能

if(e.target.id=="" || $('[id^=div_]').filter('#'+e.target.id).length==0){ 
    $('[id^=div_]').hide(); 
    }

filter功能將在div名單中篩選選定的div whoes id以div開頭

$(window).click(function(e) { 
 
    if(e.target.id=="" || $('[id^=div_]').filter('#'+e.target.id).length==0){ 
 
    $('[id^=div_]').hide(); 
 
    } 
 

 
});

div { 
 
    height: 150px; 
 
    width: 150px; 
 
    display: inline-block; 
 
    background: green; 
 
    margin: 10px; 
 
    color: #fff; 
 
    text-align: center; 
 
    line-height: 150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="div_1">One</div> 
 
<div id="div_2">Two</div> 
 
<div id="div_3">Three</div> 
 
<div id="div_4">Four</div>

來源

2017-04-27 07:20:24 Dhiraj

JQuery在外部點擊時隱藏了多個具有相似ID的div

回答

相關問題