切换其中的每个面板的迷你开关

Question

我有一个可以激活所有面板的大开关（转换为关闭（灰色）到开启（绿色）。我想在面板中的每个miniswitch上执行此操作，所以如果我单击面板中的miniswitch id 2，它只转换为ID为2的面板，而非所有面板。

主要结构（1个面板的例子）：

<div id="taskPanel" class="col-xs-6 col-sm-4 col-md-3">
  <div id="4" class="panel panel-off2">
    <div class="panel-heading">
      <div class="row">
        <div class="ptitle">Task 4</div>
          <div class="optiongroup">  
            <span class="glyphicon glyphicon-edit yellow"></span>
            <div class="miniswitch">
              <input type="checkbox" data-id="4">
              <label>
                <i class="glyphicon glyphicon-off"></i>
              </label>
            </div> 
          </div>
        </div>
      </div>
      <div class="panel-body">
      <div class="row">  
        <div class="col-xs-12"><strong>Planning:</strong>&nbsp;0/10 * * * * ?</div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <strong>URI:</strong>&nbsp;/cron/test
        </div>
      </div>
    </div>
  </div>
</div>

JQuery的：

$(".switch").click(function () {
  $("#tp1")[0].innerHTML = ( $("#tp1").text() == "Activar todas" )? 'Desactivar todas' : 'Activar todas';
  var varVisible = ( $("#tp1").text() == "Activar todas" )? 'panel-off2' : 'panel-success';

  $('div.panel').each( function(){
    this.className = "panel " + varVisible;
  });

  var miniswitch = ( $("#tp1").text() == "Activar todas" )? false : true;

  $('.miniswitch').each( function(){
    $("input[type=checkbox]").attr('checked',miniswitch);
  });  

  /*
  if ($("#tp1").text() == "Activar todas") {
    $("#tp1").text("Desactivar todas");
  } else {
    $("#tp1").text("Activar todas");
  }
  */
});

$(".miniswitch").click(function () {
  $("#tp1")[0].innerHTML = ( $("#tp1").text() == "Activar todas" )? 'Desactivar todas' : 'Activar todas';
  var varVisible = ( $("#tp1").text() == "Activar todas" )? 'panel-off2' : 'panel-success';

  $('div.panel').each( function(){
    this.className = "panel " + varVisible;
  });

  var miniswitch = ( $("#tp1").text() == "Activar todas" )? false : true;

  $('.miniswitch').each( function(){
    $("input[type=checkbox]").attr('checked',miniswitch);
  });

  /*
  if ($("#tp1").text() == "Activar todas") {
    $("#tp1").text("Desactivar todas");
  } else {
    $("#tp1").text("Activar todas");
  }
  */
});

$(document).ready(function () {
  $('.switch-light').bootstrapSwitch();
  /*
  $('.switch-light input').on('change', function() {
    $('.panel').toggleClass("panel-off2", !this.checked).toggleClass("panel-success", this.checked);
  })
  */
});   

这是我的JSFiddle：http://jsfiddle.net/cL7U3/3/

Answer 1

Demo Fiddle

您选择了所有div.panel个元素，您只需选择当前点击的开关中的父元素：

$(this).parents('div.panel').each(function () {
    this.className = "panel " + varVisible;
});