jquery - 在它的迷你开关中切换每个面板

Question

我有一个大开关可以激活所有面板(转换为关闭(灰色)到打开(绿色)。我想在面板中的每个迷你开关上都这样做，所以如果我点击面板中的迷你开关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;
});