Добавить класс в DIV, если установлен флажок onload

Мне нужна помощь со сценарием для добавления «активного» класса в div, когда установлен скрытый флажок. Все это происходит в довольно сложной форме, которую можно сохранить и позже отредактировать. Вот как выглядит процесс:

У меня есть ряд скрытых флажков, которые устанавливаются при нажатии видимого DIV. Благодаря нескольким людям, особенно Димитару Кристоффу из предыдущих постов здесь, у меня есть несколько простых скриптов, которые справляются со всем:

  1. Человек нажимает на div:

    <div class="thumb left prodata" data-id="7"> ядда ядда </div>

  2. В div добавляется активный класс:

      $$('.thumb').addEvent('click', function(){
    this.toggleClass('tactive');
  });

  3. Установлен соответствующий флажок:

    document.getElements("a.add_app").addEvents({
click: function(e) {
    if (e.target.get("tag") != 'input') {
         var checkbox = document.id("field_select_p" + this.get("data-id"));
         checkbox.set("checked", !checkbox.get("checked"));
    }
}

    });

Теперь мне нужна четвертая (и последняя) функция для завершения проекта (с использованием mootools или просто javascript, без jQuery). Когда форма загружается после сохранения, мне нужен способ добавить активный класс обратно в соответствующий div. По сути, обратный процесс. Я ЕСМЬ пытаюсь понять это сам и хотел бы опубликовать идею, но все, что я пробовал, ну, ну, плохо. Я думал, что, по крайней мере, отправлю этот вопрос, пока буду работать над ним. Заранее спасибо!


checkbox mootools addclass
person marcodeluca    schedule 26.04.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward 

window.addEvents({
  load: function(){
    if (checkbox.checked){
      document.getElements('.thumb').fireEvent('click');
    }
  }
});

Пример: http://jsfiddle.net/vCH9n/.

person Oskar Krawczyk    schedule 26.04.2011
comment
Итак, вы говорите, что я могу запустить уже существующую функцию щелчка. Это кажется хорошей идеей, но я не уверен, как запустить это событие для правильных пар идентификаторов DIV / checkbox. IE: div с data-id = 7 соотносится с флажком field_select_p_7, так как мне сказать div с data-id = 7 добавить класс к этому div? Можно ли это сделать как есть, или мне нужно добавить уникальный идентификатор ко всем моим div? Это та часть, которую я не могу понять. - person marcodeluca; 27.04.2011
comment
Хорошо, я создал jsFiddle с рабочим кодом, а затем начал работать над способом перебора флажков. Как указать, что соответствующие div-ы флажков активны, до сих пор не могу понять: jsfiddle.net / marcodeluca / A6PR8 / 29 - person marcodeluca; 27.04.2011

arrow_upward
1
arrow_downward

Хорошо, если кому-то интересно, вот окончательное решение. Это делает следующее: создает событие щелчка для класса DIV для переключения активного класса onclick, а также сопоставляет каждый DIV с флажком, используя data-id = "X", который = идентификатор флажка. Наконец, если форма перезагружается (в этом случае форма может быть сохранена и отредактирована позже), последний фрагмент javascript затем видит, какие флажки отмечены при загрузке страницы, и запускает активный класс для DIV.

Чтобы увидеть все это в действии, посмотрите здесь: https://www.worklabs.ca/2/add-new/add-new?itemetype=website (скрипт в настоящее время работает на третьей вкладке, ВЫБЕРИТЕ СТИЛЬ). Однако вы не сможете сохранить / отредактировать его, если вы не являетесь участником, но он работает :) Вы можете отобразить флажки с помощью firebug и самостоятельно переключить флажки, чтобы увидеть.

window.addEvent('domready', function() {

// apply the psuedo event to some elements
$$('.thumb').addEvent('click', function() {
    this.toggleClass('tactive');
});

$$('.cbox').addEvent('click', function() {
   var checkboxes= $$('.cbox');

       for(i=1; i<=checkboxes.length; i++){
               if(checkboxes[i-1].checked){
               if($('c_'+checkboxes[i-1].id))
                       $('c_'+checkboxes[i-1].id).set("class", "thumb tactive");
               }
       else{
               if($('c_'+checkboxes[i-1].id))
                       $('c_'+checkboxes[i-1].id).set("class", "thumb");
               }
       }
});

// Add the active class to the corresponding div when a checkbox is checked onLoad... basic idea:
var checkboxes= $$('.cbox');

for(i=1; i<=checkboxes.length; i++){
    if(checkboxes[i-1].checked){
       $('c_field_tmp_'+i).set("class", "thumb tactive");
    }
}

document.getElements("div.thumb").addEvents({
      click: function(e) {
        if (e.target.get("tag") != 'input') {
          var checkbox = document.id("field_tmp_" + this.get("data-id"));
          checkbox.set("checked", !checkbox.get("checked"));
        }
      }
    });

  });
person marcodeluca    schedule 28.04.2011