压缩此代码的最佳方法是什么？它是功能性的，但不是很干燥答案

【问题标题】：What is the best way to condense this code? It's functional but not very DRY压缩此代码的最佳方法是什么？它是功能性的，但不是很干燥
【发布时间】：2019-02-12 14:15:40
【问题描述】：

这个 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>

【问题讨论】：

你能添加你的html吗？
你可以链接选择器...你也可以做一个函数
那是 OP 的实际 HTML，还是其他人编造的？
@ziggywiggy 它是 OP 自己的。他们将其放在评论中，然后将其编辑到问题中。

标签： jquery dry

【解决方案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>

【讨论】：

【解决方案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 在哪里

【讨论】：

【解决方案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>

【讨论】：