如何縮短這個jQuery代碼？

對不起，我不說冠軍，但我對如何縮短一段jQuery代碼問題：如何縮短這個jQuery代碼？

$(function() { 
    $("#profile1").click(function() { 
     $("#profile1").addClass("focused"); 
     $("#profile2").removeClass("focused"); 
     $("#profile3").removeClass("focused"); 
    }); 
    $("#profile2").click(function() { 
     $("#profile1").removeClass("focused"); 
     $("#profile2").addClass("focused"); 
     $("#profile3").removeClass("focused"); 
    }); 
    $("#profile3").click(function() { 
     $("#profile1").removeClass("focused"); 
     $("#profile2").removeClass("focused"); 
     $("#profile3").addClass("focused"); 
    }); 
});

對於我所看到的，一個toggleClass不會做它，因爲我可以按該對象連續兩次，因此使多個對象同時被聚焦，而我正在尋找某種開關，其中只有一個對象可以聚焦（即，讓聚焦的聚會）時間。

這是我是一個初學者，但我猜我應該涉及'這個'的某個地方，但我不知道如何。

在此先感謝！你們好棒！

來源

2013-10-30 Erik Blomqvist

給他們一個整體課，然後瞄準它。例如'$（「。profile」）' –

另外，你可以在click事件中使用'$（this）'。 –

使用單選按鈕？這就是他們所做的。 – Christophe

從所有這些類中移除該類，然後僅將其添加到目標類中。另外，僅使用單個事件處理程序並動態地引用事件目標。

$(function() { 
    var $profiles = $("#profile1, #profile2, #profile3"); 
    $profiles.click(function(e) { 
     $profiles.removeClass("focused"); 
     $(this).addClass("focused"); // or use `e.target` instead of `this` 
    }); 
});

您也可以使用類.profile而不是ID來選擇現在的元素。

來源

2013-10-30 01:03:30 Bergi

太棒了！如果我想改變一個完全其他的div，那也有三個對象（讓我們說圖像）。我希望他們中的一個與相應的配置文件編號「聚焦」在一起，即，當我點擊＃profile1時，它將得到類「聚焦」的類，但是我也希望具有id＃id1的圖像接收相同的類。 –

然後，您需要使用某種從可點擊元素到圖像元素的映射。這可以是代碼中的靜態表（key-value-map：對象），配置文件上的動態構建屬性，甚至是引用圖像選擇器的屬性。例如。你可以從'this.id'中讀取數字，前置'＃id'，並將其用作選擇器。 – Bergi

如何縮短這個jQuery代碼？

回答

相關問題