Question

下面的代码工作正常，但我想合并检查并单击单个函数中的函数。有可能吗？

$(function () {
  if($("#enablepromo0").is(":checked"))   
     $("#PromoPanel").show(300);
  else
    $("#PromoPanel").hide(300);
});
$(function () {
   $("#enablepromo0").click(function () {
     if ($(this).is(":checked")) {
          $("#PromoPanel").show(300);
        } else {
          $("#PromoPanel").hide(300);
        }
    });
});

Answer 1

两个功能都执行相同的工作，所以我更改了一些内容以显示警报：

$(function () {  

$("#enablepromo0").click(function () {
     alert("dddddd")
  if($("#enablepromo0").is(":checked"))   
     $("#PromoPanel").show(300);
  else
    $("#PromoPanel").hide(300); 
        });

 


  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="checkbox" id='enablepromo0'/>
<div id="PromoPanel" style="border: 1px solid  red; width:50px; heigth:50px; display:none;">uuu</div>

Answer 2

将代码移至其自己的函数并根据需要调用：

function showHide() {
  if ($("#enablepromo0").is(":checked"))   
     $("#PromoPanel").show(300);
  else
    $("#PromoPanel").hide(300);
}

$(function () { 
  showHide();

  $("#enablepromo0").click(function () {
    showHide();
  });
});

Answer 3

使用更改事件并触发它，然后它可以检测到复选框的当前状态。我更改了代码以切换类，从而避免最初出现“闪光”。

$(function() {
  $("#enablepromo0").on('change', function() {
    let isChecked = !this.checked;
    $("#PromoPanel").toggleClass("hidden", isChecked, {
      duration: 300
    });
  }).trigger('change');
});

.panel {
  border: solid lime 1px;
  background: #ddffdd;
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
Check to show: <input type="checkbox" id='enablepromo0' />
<div class="container">
  <div id="PromoPanel" class="panel hidden">
    <h2>Hi There</h2>Get stoked</div>
</div>

如何为同一div合并JavaScript中的两个函数

3 个答案: