Добавить класс в DIV, если установлен флажок onload - PullRequest
Новая
       41

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

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

Мне нужна помощь со сценарием для добавления «активного» класса в 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. В основном обратный процесс. Я пытаюсь понять это сам и хотел бы поделиться идеей, но все, что я пытался, это, ну, плохо. Я думал, что, по крайней мере, опубликую этот вопрос, пока работаю над ним. Заранее спасибо!

Ответы [ 2 ]

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

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

Toпосмотрите все это в действии, посмотрите здесь: 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"));
        }
      }
    });

  });
1 голос
/ 27 апреля 2011 
window.addEvents({
  load: function(){
    if (checkbox.checked){
      document.getElements('.thumb').fireEvent('click');
    }
  }
});

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

...