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图标）：

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

});

模态（miniswitchmodal图标）的开关图标的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

最简单的方法是让模态事件知道当前面板是什么。所以我们可以使用全局变量（虽然不建议这样做）。以下是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"))

我还将标识modalSwitch添加到模式对话框中的复选框，以便于参考。

这应该让你开始，虽然我建议你研究其他方法，例如使用javascript在函数内部具有函数的能力

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

    ...
    ...
})

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

1 个答案: