jQuery的：將所有其他分區的屬性，除了目前點擊DIV

我試圖讓這個當我點擊一個div所有其他的div成爲「取消」（即只選擇div的background-image是不同的，別人得到復位原創），並且只有點擊被選中/激活。每個div都有獨立的開/關圖像。jQuery的：將所有其他分區的屬性，除了目前點擊DIV

http://jsfiddle.net/sergep/5QsCy/

該代碼具有大量的重複。我不確定如何處理「取消」所有其他div（除了活動的div）的想法，而不必使用更多的冗餘代碼。

反正是有整理（即概括和刪除冗餘）我的jsfiddle：

$(".gameboy").click(function() { 
    var img1 = "url(\"https://cdn3.iconfinder.com/data/icons/funky/136/Game-1-128.png\")"; 
    var img2 = "url(\"https://cdn3.iconfinder.com/data/icons/funky/136/Game-2-128.png\")"; 
    if ($(this).css("background-image") == img1) { 
     $(this).css("background-image", img2); 
    } 
    else { 
     $(this).css("background-image", img1); 
    } 
}); 
$(".switch").click(function() { 
    var img1 = "url(\"https://cdn3.iconfinder.com/data/icons/mobiactions/512/turn_off_on_power-128.png\")"; 
    var img2 = "url(\"http://icdn.pro/images/en/o/n/on-off-icone-4799-128.png\")"; 
    if ($(this).css("background-image") == img1) { 
     $(this).css("background-image", img2); 
    } 
    else { 
     $(this).css("background-image", img1); 
    } 
}); 
$(".face").click(function() { 
    var img1 = "url(\"https://cdn3.iconfinder.com/data/icons/glyph/227/Smile-128.png\")"; 
    var img2 = "url(\"https://cdn3.iconfinder.com/data/icons/glyph/227/Pacman-1-128.png\")"; 
    if ($(this).css("background-image") == img1) { 
     $(this).css("background-image", img2); 
    } 
    else { 
     $(this).css("background-image", img1); 
    } 
});

來源

2013-10-21 Serge P

在CSS中使用類並添加/使用JS刪除這些類，而不是以編程方式更改每個背景圖像。它會讓你的代碼更具可讀性。 – ahren

，因爲所有你改變的是風格，爲什麼不創建一個類「活動」，並將其應用到div剛剛被點擊，同時將其從兄弟分區中刪除。都可以在一個簡單的點擊功能來概括：

$('div').click(function(){ 
    $(this).siblings('div').removeClass('active'); 
    $(this).addClass('active'); 
});

然後只是風格你的CSS的。主動類的每個格的：

.gameboy.active {...} 
.switch.active {...} 
.face.active {...}

順便說一句，在對「格」選擇點擊功能就是這個例子。很可能你不希望你網站上的每個div都是可點擊的，因此我要麼給這些div的全部3個類，要麼使用更具體的css選擇器來指定它們。

來源

2013-10-21 12:26:16 DMTintner

這絕對使代碼**很多**更具可讀性！謝謝！ –

jQuery的：將所有其他分區的屬性，除了目前點擊DIV

回答

相關問題