javascript - 如何减少 Jquery 中的这一行？

Question

已关闭。此问题不符合 Stack Overflow guidelines 。目前不接受答案。

---

这个问题似乎与 help center 中定义的范围内的编程无关。 .

已关闭 9 年前。

Improve this question

我用这种方式有很多行代码以及如何减少这些行。另请解释一下你的代码。如果有任何编写此类逻辑代码的简单方法，请发布链接。

$(function () {
  $("#menu1").click(function () {
    $(this).css({"background-color": "rgba(255, 255, 255, 0.4)"});
    $("#menu2").css({"background-color": "transparent"});
    $("#menu3").css({"background-color": "transparent"});
    $("#menu4").css({"background-color": "transparent"});
    $("#menu5").css({"background-color": "transparent"});
  });

  $("#menu2").click(function () {
    $(this).css({"background-color": "rgba(255, 255, 255, 0.4)"});
    $("#menu1").css({"background-color": "transparent"});
    $("#menu3").css({"background-color": "transparent"});
    $("#menu4").css({"background-color": "transparent"});
    $("#menu5").css({"background-color": "transparent"});
  });

  $("#menu3").click(function () {
    $(this).css({"background-color": "rgba(255, 255, 255, 0.4)"});
    $("#menu1").css({"background-color": "transparent"});
    $("#menu2").css({"background-color": "transparent"});
    $("#menu4").css({"background-color": "transparent"});
    $("#menu5").css({"background-color": "transparent"});
  });
});

Answer 1

使用jquery Attribute starts with selector和 .not() 。试试这个:

$(function(){
     $("[id^=menu]").click(function(){
          $(this).css({"background-color":"rgba(255, 255, 255, 0.4)"});
          $("[id^=menu]").not(this).css({"background-color":"transparent"});   
     });            
});