Question

我需要一个脚本帮助，在选中隐藏复选框时为div添加“活动”类。这一切都发生在一个复杂的形式，可以保存和以后编辑。这是过程：

我有一系列隐藏的复选框，在单击可见的DIV时会检查这些复选框。感谢一些人，特别是Dimitar Christoff在此之前的帖子，我有一些简单的脚本可以处理所有事情：

一个人点击div：

<div class="thumb left prodata" data-id="7"> yadda yadda </div>

将活动类添加到div：

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

选中相应的复选框：

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。基本上扭转了这个过程。我试图弄清楚自己，并希望发表一个想法，但我尝试过的任何东西，好吧，坏。我以为我至少会在工作时发布这个问题。提前谢谢！

Answer 1

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

示例：http://jsfiddle.net/vCH9n/

Answer 2

好的，如果有人有兴趣，这是最终的解决方案。这样做是：为DIV类创建一个单击事件以切换活动类onclick，并使用data-id =“X”=复选框ID将每个DIV与一个复选框相关联。最后，如果表单被重新加载（在这种情况下表单可以保存并稍后编辑），最后一段javascript然后会看到在页面加载时检查了哪些复选框并触发DIV的活动类。

要查看全部操作，请在此处查看：https://www.worklabs.ca/2/add-new/add-new?itemetype=website（脚本当前正在处理第三个选项卡，选择STYLE）。除非你是会员，否则你将无法保存/编辑它，但它有效:)你可以使用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"));
        }
      }
    });

  });

如果选中onload复选框，则将类添加到DIV

2 个答案: