Question

我有一个类似于界面的窗口，当你点击一个桌面图标时，一个窗口（设置为display：hidden;）让这个类“可见”。

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

窗

<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

像这样迭代数组：

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

修改：有关详情，请参阅jQuery documentation。

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

1 个答案: