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。但是，您应该确保使用这些元素作为父容器驻留的上下文，以避免选择不需要的元素。或者将它们与类型相结合，例如在容器div内加wrapper然后

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

或更具体：

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

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

我想简化菜单

1 个答案: