JavaScript Use Any Number

I'm building a custom lightboxing system (because I don't like how any of the ones out there handle it), and I need a way to detect whether or not a lightbox is alread开发者_StackOverflowy opened.

What I'd like to do is this:

if (getElementById("lb" + ##).clientHeight > 0) {
  // do nothing
} else {
  // execute code
}

Where the ## represents any combination of any two numbers, so that if I have

<div class="lightbox" id="lb01">
  <!-- empty -->
</div>
<div class="lightbox" id="lb02">
  <!-- empty -->
</div>

I can detect if one of them is showing, and if it is, not open another one.

EDIT: I'd really prefer not to use jQuery, and this seems like it should be a lot easier than some of the answers I'm getting. I'm open to changing anything to make it work, none of these classes or IDs are final.

EDIT 2: Figured out a much simpler way to do this. I set up a global var lb = 0; and then detect the value of that variable, if it's equal to 0, it runs the function and changed the value to 1. When I run the closing function, it changes the value back to 0. This prevents it from having more than one open, without all that crazy JS stuff you guys where giving me.

Basically, the code now looks like this, and works exactly like I wanted.

var lb = 0;

function lightbox(id) {
  if (lb == 0) {
    lb = 1;
  } else {
    // do nothing
  }
}

function hideme(id) {
  lb = 0;
}

Use classes, or (if it is an option) jQuery.

Option 1: if you open/close a box you could assign/change an attribute like isOpen:

[boxelement].isOpen = true/false
if ([boxelement].isOpen) { }

Option 2: work with classNames:

 [boxelemnt].className += ' open';
 if ([boxelement].className.match(/open/i)) { }
 //on close
 [boxelement].className = [boxelement].className.replace(/open/i,'');

jQuery is a good option. Something along these lines may be what you're going for...

$('.lightbox').click(function() {
    $('.lightbox').removeClass('.active'); //remove from all .lightbox
    $(this).addClass('.active'); //add .active to the current element
}

This way only one will be active at a time. This is just the basic idea, your code will probably be more complex based on your DOM structure.

I hate "lightbox" effects - they obscure the page content and make me wait to see the image while I watch some animation the developer thought I'd like to see (which is really annonying after the second or third time) - so consider carefully before deploying them.

Create an object to store references to the divs, then give them a className based on their status. To see if one or either are "active", check to see if they have the active status class. When making them active or dormant, set an appropriate class.

Some simple className utility functions:

function hasClassName(el, cName) {

    if (typeof el == 'string') el = document.getElementById(el);

    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)');
    return el && re.test(el.className);
}

function addClassName(el, cName) {

    if (typeof el == 'string') el = document.getElementById(el);

    if (!hasClassName(el, cName)) {
        el.className = util.trim(el.className + ' ' + cName);
    }
}

function removeClassName(el, cName) {

    if (typeof el == 'string') el = document.getElementById(el);

    if (hasClassName(el, cName)) {
        var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g');
        el.className = trim(el.className.replace(re, ''));
    }
}

function trim(s) {
  return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' ');
}

Use with the module pattern or whatever if you don't want them as globals.