JavaScript использует любое число - PullRequest
Новая
       4

JavaScript использует любое число

0 голосов
/ 27 апреля 2011

Я создаю собственную систему лайтбокса (потому что мне не нравится, как кто-либо из них там справляется), и мне нужен способ определить, открыт ли лайтбокс или нет.

То, что я хотел бы сделать, это: 

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, и кажется, что это должно быть намного проще, чем некоторые ответы, которые я получаю. Я готов что-нибудь изменить, чтобы это работало, ни один из этих классов или идентификаторов не является окончательным.

РЕДАКТИРОВАТЬ 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;
}

Ответы [ 4 ]

2 голосов
/ 27 апреля 2011

Использовать классы или (если это возможно) jQuery .

1 голос
/ 27 апреля 2011

Вариант 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,'');
1 голос
/ 27 апреля 2011

jQuery - хороший вариант.Что-то в этом духе может быть тем, к чему вы стремитесь ... 

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

Таким образом, только один будет активен одновременно.Это просто основная идея, ваш код, вероятно, будет более сложным в зависимости от вашей структуры DOM.

0 голосов
/ 27 апреля 2011

Я ненавижу эффекты «лайтбоксов» - они затеняют содержимое страницы и заставляют меня ждать, чтобы увидеть изображение, в то время как я смотрю анимацию, которую разработчик подумал, что я хотел бы увидеть (что действительно раздражает послево второй или третий раз) - поэтому тщательно подумайте, прежде чем их развертывать.

Создайте объект для хранения ссылок на элементы 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,' ');
}

Используйте с шаблоном модуля или любым другим, если вы не хотите, чтобы они были глобальными.

...