压缩此代码的最佳方法是什么？它功能齐全，但不是很干

Question

这个jQuery工作正常，但必须有一个更简单的方法来用更少的代码实现相同的结果。

$(document).ready(function() {
  $("#ce").click(function() {
    $("#dot2, #dot3, #dot4, #logo").hide();
    $("#dot1").fadeToggle();
  });
  $("#regs").click(function() {
    $("#dot1, #dot4, #dot3, #logo").hide();
    $("#dot2").fadeToggle();
  });
  $("#pmp").click(function() {
    $("#dot1, #dot2, #dot4, #logo").hide();
    $("#dot3").fadeToggle();
  });
  $("#emr").click(function() {
    $("#dot1, #dot2, #dot3, #logo").hide();
    $("#dot4").fadeToggle();
  });
});

<div id="dots">
    <div id="dot1" class="dot">text</div>
    <div id="dot2" class="dot">text</div>
    <div id="dot3" class="dot">text</div
    <div id="dot4" class="dot">text</div>
</div>

Answer 1

要解决这个问题，您可以使用公共类的组合来统一要应用于元素的逻辑并使其更容易选择，还可以使用数据属性将自定义元数据存储在各个元素上。试试这个：

$(document).ready(function() {
  $('.toggle').click(function() {
    var $target = $('#' + $(this).data('target'));
    $('.dot').not($target).hide();
    $target.fadeToggle();
  });
});

#dots > div {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toggle" data-target="dot1">1</button>
<button class="toggle" data-target="dot2">2</button>
<button class="toggle" data-target="dot3">3</button>
<button class="toggle" data-target="dot4">4</button>

<div id="dots">
  <div id="dot1" class="dot">Dot1</div>
  <div id="dot2" class="dot">Dot2</div>
  <div id="dot3" class="dot">Dot3</div>
  <div id="dot4" class="dot">Dot4</div>
</div>

Answer 2

不知道HTML：

<script>
$(document).ready(function(){
  let target = $("#dot2, #dot3, #dot4, #logo");
  function toggle(except) {
    target.not(except).hide();
    $(except).fadeToggle();
  }
  $("#ce").click(function(){
    toggle("#dot1");
  });
  $("#regs").click(function(){
    toggle("#dot2");
  });
  $("#pmp").click(function(){
    toggle("#dot3");
  });
  $("#emr").click(function(){
    toggle("#dot4");
  });
});

知道HTML后：

相同:)因为我不知道你的#ce，＃regs，＃pmp和#emr在哪里

Answer 3

您可以保留一组获取点击处理程序的ID，并使用索引来定位正确的dot及其兄弟。

var clicks = ["ce", "regs", "pmp", "emr"];

$(document).ready(function() {
  clicks.forEach((id, i) => {
    $("#" + id).click(e => {
      $("#dot" + (i + 1))
        .fadeToggle()
        .siblings()
        .add("#logo")
        .hide();
    })
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="dots">
  <div id="dot1" class="dot">text</div>
  <div id="dot2" class="dot">text</div>
  <div id="dot3" class="dot">text</div>
  <div id="dot4" class="dot">text</div>
</div>