Question

我刚刚提出了一个关于复选框的问题，但是我需要最后一个问题才能完成。

因此，我想说我希望在以下代码中为复选框设置默认设置：

<div id="exampleBoxes">
    <p>Example 1</p>
    <fieldset id="field1">
        <input type="checkbox" name="forca" class="checkOne" />
        <input type="checkbox" name="forca" class="checkTwo" />
        <input type="checkbox" name="forca" class="checkThree" />
        <input type="checkbox" name="forca" class="checkFour" />
        <input type="checkbox" name="forca" class="checkFive" />
    </fieldset>

    <p>Example 2</p>
    <fieldset id="field2">
        <input type="checkbox" name="destreza" class="checkOne" />
        <input type="checkbox" name="destreza" class="checkTwo" />
        <input type="checkbox" name="destreza" class="checkThree" />
        <input type="checkbox" name="destreza" class="checkFour" />
        <input type="checkbox" name="destreza" class="checkFive" />
    </fieldset>
</div>

我可以添加＆＃34;已检查＆＃34;要检查它们的属性，但是我怎么能以某种方式使它可以根据我可以在#exampleBoxes div上不断更改的类来进行默认检查？

例如，如果我将一个类.methodOne添加到#exampleBoxes，我希望fieldset＃field1自动检查前3个复选框。但是如果在任何给定点.methodOne类更改为.methodTwo，则会发生不同数量的检查。

欣赏任何见解！

Answer 1

你可以触发一个关于改变的类的事件来做你想做的事，例如：

绑定事件

$("#exampleBoxes").bind('cssClassChanged', function(){ 
  if ($(this).hasClass("methodOne")){
    //do something
  }else if($(this).hasClass("methodTwo")){
    //do something else
  }
  ...... //all your conditions
})

当您更改课程时，您会触发事件

$("#exampleBoxes").addClass('methodOne');
$("#exampleBoxes").trigger('cssClassChanged')

Answer 2

要检查某个类是否已添加/删除到另一个javascript / jQuery函数中的元素，您可以使用MutationObserver：

启动MutationObserver
听....
停止MutationObserver

＆＃13;

var observer = null;

$(function () {
  $('#exampleBoxes').on('DOMAttrModified', function (e) {
    var a = this;
  });
  $('#btn1').on('click', function(e) {
    $('#exampleBoxes').toggleClass('methodOne');
  });
  $('#btn2').on('click', function(e) {
    $('#exampleBoxes').toggleClass('methodTwo');
  });
  $('#btn3').on('click', function(e) {
    if (observer != null) {
      return;
    }
    observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (mutation.attributeName === "class") {
          var newVal = $(mutation.target).prop(mutation.attributeName);
          alert('DIV exampleBoxes changed class to: ' + newVal);
          
          // Instead of alert call your function according
          // to the value of newVal (class value)
          
          
        }
      });
    });
    var config = { attributes: true, childList: true, characterData: true };
    
    // observe changes for exampleBoxes DIV element
    observer.observe($('#exampleBoxes')[0], config);
  });
  $('#btn4').on('click', function(e) {
    observer.disconnect();
    observer = null;
  });
});

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>

<div id="exampleBoxes">
    <p>Example 1</p>
    <fieldset id="field1">
        <input type="checkbox" name="forca" class="checkOne"/>
        <input type="checkbox" name="forca" class="checkTwo"/>
        <input type="checkbox" name="forca" class="checkThree"/>
        <input type="checkbox" name="forca" class="checkFour"/>
        <input type="checkbox" name="forca" class="checkFive"/>
    </fieldset>

    <p>Example 2</p>
    <fieldset id="field2">
        <input type="checkbox" name="destreza" class="checkOne"/>
        <input type="checkbox" name="destreza" class="checkTwo"/>
        <input type="checkbox" name="destreza" class="checkThree"/>
        <input type="checkbox" name="destreza" class="checkFour"/>
        <input type="checkbox" name="destreza" class="checkFive"/>
    </fieldset>
</div>
<button id="btn1">Toggle class methodOne </button>
<button id="btn2">Toggle class methodTwo </button>
<button id="btn3">Start  MutationObserver</button>
<button id="btn4">Stop  MutationObserver</button>

＆＃13;

如何根据父div来检查复选框的不同？

2 个答案: