我想简化菜单

I wanted to simplify menu

本文关键字：菜单更新时间：2023-09-26

有没有办法简化这个？

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", "");
    });
});

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

尝试：

  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","");
   });

这使用属性开头的选择器，该选择器与基于起始属性值的元素匹配，此处为 id。但是，应确保使用这些元素作为父容器驻留的上下文，以避免选择不需要的元素。或者将它们与它们的类型组合在一起，例如容器内的div wrapper然后

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

或更具体：

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

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