javascript - 使用切换按钮将事件面板与事件模式同步

Question

我有一排面板，每个面板中都有一个事件按钮。在每个面板中也有一个编辑面板的选项，所以当它点击橙色图标(见下面的 fiddle )时，它会打开一个模式并显示一个选项列表，包括另一个按钮来激活您点击的面板模态。我想将模态的事件按钮同步到您单击的面板，所以如果我在面板 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 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(  ...  )
    })

    ...
    ...
})