我想縮短給定的 jquery 代碼，但我是新手，所以我要求老年人 [關閉]

Question

關閉。 這個問題需要細節或清晰。 它目前不接受答案。

---

想改進這個問題？ 通過編輯此帖子添加詳細信息並澄清問題。

1 小時前關閉。

改進這個問題

在這個 jQuery 部分中有很多重復，我嘗試使用循環，但是當我嘗試單擊一個按鈕時，它會同時給出所有按鈕的響應。 請幫忙

$('.btn1').mouseenter(function(){
  if($('.pop1').css('opacity') == "0")
    $('.pop1').css('opacity','1')
})

$('.btn2').mouseenter(function(){
  if($('.pop2').css('opacity') == "0")
    $('.pop2').css('opacity','1')
})

$('.btn3').mouseenter(function(){
  if($('.pop3').css('opacity') == "0")
    $('.pop3').css('opacity','1')
})
  

$('.btn1').mouseleave(function(){
  if($('.pop1').css('opacity') == "1")
    $('.pop1').css('opacity','0')
})

$('.btn2').mouseleave(function(){
  if($('.pop2').css('opacity') == "1")
    $('.pop2').css('opacity','0')
})

$('.btn3').mouseleave(function(){
  if($('.pop3').css('opacity') == "1")
    $('.pop3').css('opacity','0')
})

Answer 1

可能有更好的方法使用單個 class 和相對於$(this)的 DOM 導航。 但是您也可以只使用循環將循環索引替換為 class 名稱。

for (let i = 1; i <= 3; i++) {
  $(`.btn${i}`).hover(function() {
    if ($(`.pop2${i}`).css('opacity') == "0")
      $(`.pop2${i}`).css('opacity', '1')
  }, function() {
    if ($(`.pop2${i}`).css('opacity') == "1")
      $(`.pop2${i}`).css('opacity', '0')
  });
}

Answer 2

您需要發布 HTML。 如果你有兩個不同的容器中的按鈕和彈出窗口，你可以這樣做

 $('.btn').on("mouseenter mouseleave", function(e) { $('.pop').eq($(this).index()).toggle(e.type === "mouseenter") })

 .pop { display: none;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div> <button class="btn">One</button> <button class="btn">Two</button> <button class="btn">Three</button> </div> <div> <div class="pop">One</div> <div class="pop">Two</div> <div class="pop">Three</div> </div>