CODEWITHSUNDEEP
javascriptjqueryarraysclass
Thomas Huurman
Thomas Huurman

Reputation: 55

Check if ID from array has class

i have a windows like interface and when u click a desktop icon, a windows (set to display: hidden;) gets the class "visible".

.visible {
    display: initial !important;
}

i have multiple desktop icons, and multiple windows. There is also a taskbar, with the same icons. i want these to be highlighted when the corresponding windows is set to "visible".

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

the way i wanted to do this is by putting the IDs of the windows in an array. then check if any of those windows have the class "visible". and if they do, add a class of "hover" to the corresponding taskbar icon.

this is what i got so far.

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 : Desktop icon

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

Taskbar

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

Upvotes: 1

Views: 220

Answers (2)

Sagar Arora
Sagar Arora

Reputation: 1773

You have to iterate using jquery.each method over array to check whether that particular ID selector has class visible or not like:

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');
    };
});

Upvotes: 1

Richard Yan
Richard Yan

Reputation: 1296

Iterate through the array like this:

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

Edit: See jQuery documentation for more.

Upvotes: 1

Related Questions