我想簡化菜單

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

它使用了基於起始屬性值，這裏的ID匹配元素attribute starts with selector。但是你應該確保使用這些元素作爲父容器的上下文，以避免選擇不需要的元素。或與它們的類型像前一個div將它們組合起來的容器wrapper然後

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

或多個特定的內部：

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

但我建議如果可能的話提供所有他們共同的類名稱和用途一個類選擇器，因爲它比一個屬性選擇器更快。