javascript - Jquery 单击，隐藏和显示 div 多元素

Question

有人能帮我吗？
我想在点击时隐藏 div，但其他 div 仍然处于事件状态，这段代码实际上工作正常，但这段代码效率较低且耗时，有没有办法让它更容易或有类似的方法，这个我不仅会输入 3 项但超过 10 项

$(function() {
  $(document).on("click", "div.myDiv", function(e) {
    $('.goo').css('display', 'none');
    $('.goo2').css('display', 'block');
    $('.goo3').css('display', 'block');
  });
})

$(function() {
  $(document).on("click", "div.myDiv2", function(e) {
    $('.goo').css('display', 'block');
    $('.goo2').css('display', 'none');
    $('.goo3').css('display', 'block');
  });
})

$(function() {
  $(document).on("click", "div.myDiv3", function(e) {
    $('.goo').css('display', 'block');
    $('.goo2').css('display', 'block');
    $('.goo3').css('display', 'none');
  });
})

.myDiv {
  border: 1px solid gray;
  margin: 10px;
}

.myDiv2 {
  border: 1px solid gray;
  margin: 10px;
}

.myDiv3 {
  border: 1px solid gray;
  margin: 10px;
}

.goo {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  width: 90%;
  height: 20px;
}

.goo2 {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  width: 90%;
  height: 20px;
}

.goo3 {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  width: 90%;
  height: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myDiv">
  <div class="goo"></div>
  Test1
</div>
<div class="myDiv2">
  <div class="goo2"></div>
  Test2
</div>
<div class="myDiv3">
  <div class="goo3"></div>
  Test3
</div>

Answer 1

与 ID 相比，类的全部意义在于它们不必是唯一的并且可以重复使用，从而避免您重复代码。

const $allGoos = $(".goo");

$(".myDiv").click(function() {
  $allGoos.show();
  $(this).find('.goo').hide();
});

.myDiv {
  border: 1px solid gray;
  margin: 10px;
}

.goo {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  width: 90%;
  height: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myDiv">
  <div class="goo"></div>
  Test1
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test2
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test3
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test4
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test5
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test6
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test7
</div>