Question

我正在构建一个自定义灯箱系统（因为我不喜欢其中的任何一个处理它），我需要一种方法来检测灯箱是否已经打开。

我想做的是：

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

##表示任意两个数字的任意组合，如果我有

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

我可以检测到其中一个是否正在显示，如果是，则不会打开另一个。

编辑：我真的不想使用jQuery，这看起来应该比我得到的一些答案容易得多。我愿意改变任何东西以使其有效，这些类或ID都不是最终的。

编辑2：想出一个更简单的方法来做到这一点。我设置了一个全局var lb = 0;，然后检测该变量的值，如果它等于0，它运行该函数并将值更改为1.当我运行关闭函数时，它将值更改回0这可以防止它有多个开放，没有你们给我的那些疯狂的JS东西。

基本上，代码现在看起来像这样，并且完全像我想要的那样工作。

var lb = 0;

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

function hideme(id) {
  lb = 0;
}

Answer 1

使用类，或（如果是选项）jQuery。

Answer 2

jQuery是一个不错的选择。沿着这些方向的东西可能就是你想要的......

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

这样一次只能激活一个。这只是基本思想，根据您的DOM结构，您的代码可能会更复杂。

Answer 3

选项1：如果您打开/关闭一个框，您可以指定/更改isOpen之类的属性：

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

选项2：使用classNames：

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

Answer 4

我讨厌“灯箱”效果 - 它们模糊了页面内容，让我等着观看图像，同时我看了一些开发人员认为我想看到的动画（这是真的 annonying after第二次或第三次） - 所以在部署它们之前要仔细考虑。

创建一个对象来存储对div的引用，然后根据它们的状态为它们提供className。要查看其中一个或哪一个是“活动”，请检查它们是否具有活动状态类。当它们处于活动状态或休眠状态时，请设置适当的类。

一些简单的className实用程序函数：

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

使用模块模式或其他任何内容，如果你不希望它们作为全局变量。

JavaScript使用任意数字

4 个答案: