檢查數組中的ID是否具有類

我有一個類似於Windows的界面，當你點擊一個桌面圖標時，一個窗口（設置爲顯示：隱藏;）得到類「可見」。檢查數組中的ID是否具有類

.visible { 
    display: initial !important; 
}

我有多個桌面圖標和多個窗口。還有一個任務欄，具有相同的圖標。我希望這些在相應的窗口設置爲「可見」時突出顯示。

.taskbar_icon.hover { 
    background: #9a3233; 
    transition: all 300ms ease-in-out; 
}

我想這樣做的方式是將窗口的ID放入數組中。然後檢查這些窗口中的任何一個是否具有「可見」類。，如果他們這樣做，添加一類「懸停」到相應的任務欄圖標。

這是我到目前爲止。

的Jquery：

window.setInterval(function() { 
var windows = ["#explorer", "#chrome", "#txt_editor"]; 
console.log(windows); 
    if ($(windows).hasClass('visible')) { 
     $(this + '_taskbar').addClass('hover'); 
    } 
    else { 
     $(this + '_taskbar').removeClass('hover'); 
    }; 
}, 100);

HTML：桌面圖標

<div id="desktop"> 
     <a href="#_" target="#explorer" class="desktop_icon"><img src="img/icons/folder.png"></a> 
     <a href="#_" target="#chrome" class="desktop_icon"><img src="img/icons/chrome.png"></a> 
     <a href="#_" target="#txt_editor" class="desktop_icon"><img src="img/icons/word.png"></a> 
    </div>

的Windows

<div id="explorer" class="window"></div> 
<div id="chrome" class="window"></div> 
<div id="txt_editor" class="window"></div>

任務欄

<div id="taksbar"> 
      <ul> 
       <li><a href="#_" target="#explorer" id="explorer_taskbar" class=" taskbar_icon"><img src="img/icons/folder_taskbar.png"></a></li> 
       <li><a href="#_" target="#chrome" id="chrome_taskbar" class=" taskbar_icon"><img src="img/icons/chrome.png"></a></li> 
       <li><a href="#_" target="#txt_editor" id="txt_editor_taskbar" class=" taskbar_icon"><img src="img/icons/word_taskbar.png"></a></li> 
      </ul> 
     </div>

來源

2017-05-07 Thomas Huurman

你必須使用jquery.each方法在陣列來檢查該特定ID選擇是否具有類可見或不喜歡迭代：

var windows = ["#explorer", "#chrome", "#txt_editor"]; 
$.each(windows , function(index, value) { 
    alert(index + ": " + value); 
    if ($(value).hasClass("visible")){ 

     $(value+ '_taskbar').addClass('hover'); 
    } 
    else { 
     $(value + '_taskbar').removeClass('hover'); 
    }; 
});

來源

2017-05-08 06:28:23

@Justastudent只是檢查現在 –

@Justastudent感謝名單好友 –

就不得不改變「如果（$（值）.hasClass（」可見「）））{」到「如果（$（值）.hasClass（」可見「））{」但這似乎很好。謝謝！ –

迭代通過這樣的陣列：

$.each(windows,function(i,l) { 
    if ($(l).hasClass('visible')) { 
    $(l + '_taskbar').addClass('hover'); 
    } else { 
    $(l + '_taskbar').removeClass('hover'); 
    }; 
});

編輯：參見jQuery documentation更多。

來源

2017-05-08 00:07:55

你可能想將鏈接添加到[文檔]（// API .jquery.com/jquery.each /＃jQuery-each-array-callback）。 –

檢查數組中的ID是否具有類

回答

相關問題