javascript - 我想简化菜单

Question

有没有办法简化这个？

jQuery(function ($) {

    $("#bt1").on("click", function () {
        $(this).css("background-image", "url(css/fondos/fondotopActivo.png)");
        $("#bt2").css("background-image", "");
        $("#bt3").css("background-image", "");
        $("#bt4").css("background-image", "");
        $("#bt5").css("background-image", "");
        $("#bt6").css("background-image", "");
        $("#bt7").css("background-image", "");
    });

    $("#bt2").on("click", function () {
        $(this).css("background-image", "url(css/fondos/fondotopActivo.png)");
        $("#bt1").css("background-image", "");
        $("#bt3").css("background-image", "");
        $("#bt4").css("background-image", "");
        $("#bt5").css("background-image", "");
        $("#bt6").css("background-image", "");
        $("#bt7").css("background-image", "");
    });

    $("#bt3").on("click", function () {
        $(this).css("background-image", "url(css/fondos/fondotopActivo.png)");
        $("#bt1").css("background-image", "");
        $("#bt2").css("background-image", "");
        $("#bt4").css("background-image", "");
        $("#bt5").css("background-image", "");
        $("#bt6").css("background-image", "");
        $("#bt7").css("background-image", "");
    });

    $("#bt4").on("click", function () {
        $(this).css("background-image", "url(css/fondos/fondotopActivo.png)");
        $("#bt1").css("background-image", "");
        $("#bt2").css("background-image", "");
        $("#bt3").css("background-image", "");
        $("#bt5").css("background-image", "");
        $("#bt6").css("background-image", "");
        $("#bt7").css("background-image", "");
    });

    $("#bt5").on("click", function () {
        $(this).css("background-image", "url(css/fondos/fondotopActivo.png)");
        $("#bt1").css("background-image", "");
        $("#bt2").css("background-image", "");
        $("#bt4").css("background-image", "");
        $("#bt3").css("background-image", "");
        $("#bt6").css("background-image", "");
        $("#bt7").css("background-image", "");
    });

    $("#bt6").on("click", function () {
        $(this).css("background-image", "url(css/fondos/fondotopActivo.png)");
        $("#bt1").css("background-image", "");
        $("#bt2").css("background-image", "");
        $("#bt4").css("background-image", "");
        $("#bt5").css("background-image", "");
        $("#bt3").css("background-image", "");
        $("#bt7").css("background-image", "");
    });

    $("#bt7").on("click", function () {
        $(this).css("background-image", "url(css/fondos/fondotopActivo.png)");
        $("#bt1").css("background-image", "");
        $("#bt2").css("background-image", "");
        $("#bt4").css("background-image", "");
        $("#bt5").css("background-image", "");
        $("#bt6").css("background-image", "");
        $("#bt3").css("background-image", "");
    });
});

它工作正常，但我想让它更轻。

Answer 1

尝试:

  var $allBts =  $("[id^=bt]");
  $allBts.on("click", function () {
        $allBts.css("background-image","");
        $(this).css("background-image","url(css/fondos/fondotopActivo.png)");
   });

或

   $allBts.on("click", function () {
        $allBts.not($(this).css("background-image","url(css/fondos/fondotopActivo.png)")).css("background-image","");
   });

这使用 attribute starts with selector匹配基于起始属性值的元素，这里是一个 id。但是您应该确保使用这些元素所在的上下文作为父容器，以避免选择不需要的元素。或者将它们与它们的类型组合在一起，例如在容器 wrapper 中的 ex a div 然后

$("div[id^=bt]")

或更具体:

$('.wrapper').find("div[id^=bt]");

但我会建议，如果可能的话，为它们提供一个通用的类名并使用类选择器，因为它比属性选择器更快。