2

有没有办法简化这个？

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

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

4

1 回答 1

2

尝试：

  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内的exwrapper

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

或更具体：

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

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

于 2013-10-19T01:39:51.267 回答