我想簡化菜單

有沒有辦法簡化這個？我想簡化菜單

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

它的工作正常，但我想保持它更輕。

來源

2013-10-19 Samuel Ramzan

+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]");

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

來源

2013-10-19 01:39:51 PSL

非常好，非常感謝，這是非常有用的，我剛剛學到了新的東西 –

@SamRamSan不客氣，很高興聽到，它幫助！ :) – PSL

我想簡化菜單

回答

相關問題