使用切换按钮将活动面板与活动模式同步

Question

我有一排面板，每个面板都有一个活动按钮。在每个面板中也有一个编辑面板的选项，所以当它点击橙色图标（见下面的小提琴）时，它会打开一个模式并显示一个选项列表，包括另一个按钮来激活你点击的面板模态的。我想将模态的活动按钮同步到您单击的面板，所以如果我在面板 3 中单击并在模态中激活它并单击保存更改，将激活面板 3。

JSFiddle：http://jsfiddle.net/FG228/2/

其中一个面板的 HTML 结构：

  <div class="col-xs-6 col-sm-4 col-md-3">
    <div id="2" class="panel panel-off2">
      <div class="panel-heading">
        <div class="row">

      <div class="ptitle">Task 2</div>
       <div class="optiongroup">  <span class="glyphicon glyphicon-edit yellow" data-rel="2"></span>
<div class="miniswitch">
    <input type="checkbox" data-id="12">
    <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><span>&nbsp;0/10 * * * * ?</span></div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <strong>URI:</strong><span>&nbsp;/cron/test</span>/task2
        </div>
      </div>
    </div>
    </div>
  </div>

各面板开关图标的JS结构（小开关图标）：

 $(".miniswitch").click(function () {
    var $panel = $(this).closest('.panel');
    $panel.toggleClass('panel-off2 panel-success');
    $(this).find('input').prop('checked', $panel.hasClass('panel-success'))

});

模态的开关图标（miniswitchmodal icons）的JS结构：

 $('.miniswitchmodal input[type=checkbox]').click( function(){
                $( "#chkActive" ).toggleClass("green");
            $( ".ui-widget-header" ).toggleClass("greenhead");
            $( ".ui-widget-header .ui-state-default" ).toggleClass("greenhead noborder");
            $( ".ui-widget-content" ).toggleClass("bordergreen");
         $("input[type=checkbox]").attr('checked',miniswitch);
      });
    $(".miniswitch").click(function () {
    var $panel = $(this).closest('.panel');
    $panel.toggleClass('panel-off2 panel-success');
    $(this).find('input').prop('checked', $panel.hasClass('panel-success'))

});

Answer 1

最简单的方法是让模态事件知道当前面板是什么。所以我们可以使用全局变量（虽然不推荐）。这是一个 jsfiddle：http://jsfiddle.net/FG228/5/

我添加了一个全局变量

var currentPanel=null  //global variable to store current panel
$(window).resize(function(){

点击编辑按钮时赋值变量

$(".glyphicon-edit").click(function () {
    currentPanel=$(this).closest('.panel') //this refers to edit button

最后在需要的时候使用它

//in  $('.miniswitchmodal input[type=checkbox]').click()
$(currentPanel)
   .toggleClass('panel-off2 panel-success',$("#modalSwitch").attr("checked"))

我还在模态对话框的复选框中添加了 ID modalSwitch，以便于参考。

这应该可以帮助您入门，但我建议您研究其他方法，例如使用 javascript 在函数中包含函数的能力

$('.glyphicon-edit').click(function(){
    var currentPanel=this
    $("#btnSave").unbind('click'); //clear the click from other panels
    $("#btnSave").click(function(){
       $(currentPanel).toggleClass(  ...  )
    })

    ...
    ...
})