javascript - 检查数组中的 ID 是否具有类

Question

我有一个类似窗口的界面，当您单击桌面图标时，一个窗口(设置为显示:隐藏；)获得“可见”类。

.visible {
    display: initial !important;
}

我有多个桌面图标和多个窗口。还有一个任务栏，具有相同的图标。当相应的窗口设置为“可见”时，我希望突出显示它们。

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

我想要执行此操作的方法是将窗口的 ID 放入一个数组中。然后检查这些窗口中是否有任何窗口具有“可见”类。如果是，则将“悬停”类添加到相应的任务栏图标。

这就是我到目前为止得到的结果。

J查询:

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>

window

<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>

Answer 1

您必须使用 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');
    };
});