Javascript 使用开关按钮将活动面板与活动模式同步

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

JSFiddle：

其中一个面板的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结构（迷你开关模态图标）：

---

最简单的方法是让模态事件知道当前面板是什么。因此，我们可以使用全局变量（尽管不建议这样做）。以下是其中的一部分：

我添加了一个全局变量

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(  ...  )
    })

    ...
    ...
})

---

问题是什么？我想将面板与模式同步，因此如果面板3处于活动状态，并且您单击面板中的黄色图标以显示模式，则模式的开关处于活动状态，但JSFIDLE无法正常工作？当我在模式中单击开关按钮时，面板不会激活…对我来说，如果我在模式中单击开关，然后单击

btnSave

（尽管我必须先更改一些内容。例如，启用

btnSave

）时，当前面板将亮起。不过我只在chrome上测试过。当我点击输入模式中的写入任何内容并点击保存更改时，面板变为激活状态，我没有触摸激活开关！！我只想在用户将模式中的开关按钮切换为active（激活）时点亮面板，在用户关闭模式中的开关按钮时熄灭面板。在这种情况下，您只需在需要的地方“使用”。因为变量是全局变量，所以只要设置了currentPanel，它就应该可以在任何地方使用。让我编辑答案。现在很完美，但在我单击“保存更改”之前，面板会亮起，我如何仅在单击“保存更改”时亮起，而不是在单击“保存更改”之前？

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

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

    ...
    ...
})