選擇元素並將類[selected]添加到其他元素，同時從所有其他類中刪除類[selected]

我試圖自己找到答案，但沒有找到任何可幫助我解決問題的結果問題。原因可能是我沒有足夠清晰地表達我的問題以找到答案，或者沒有意識到我在我面前有答案，而且無法理解它。選擇元素並將類[selected]添加到其他元素，同時從所有其他類中刪除類[selected]

因爲在我的很多谷歌搜索這個網站來了我想，經過兩天的搜索，我應該註冊並自己問問題。

我做了一個快速的jsfiddle，它基本上解決了我的問題，但代碼非常重複，可能適合一些元素，它會以指數方式炸燬我的網站。

我的jsfiddle：http://jsfiddle.net/3Unhe/1/

答案可能是簡單的，但我有基本的JavaScript/jQuery的的零知識。

我的想法來解決這個更好的方式是用簡單的英語：如果#ID點擊所有.container .selected 刪除類id's .selected到.container＃ID

html: 
<div class="titel1">titel</div> 
<div class="foto1">foto</div> 
<div class="name1">name</div> 
<br /> 
<a href="javascript:void(0);" class="titel"> 
selected titel 
</a> 
<br /> 
<a href="javascript:void(0);" class="foto"> 
selected foto 
</a> 
<br /> 
<a href="javascript:void(0);" class="name"> 
    selected name 
</a> 

jQuery: 
$('.titel').click(function() { 
    $('.name1').removeClass('selected'); 
    $('.foto1').removeClass('selected'); 
    $('.titel1').addClass('selected'); 
}); 

$('.foto').click(function() { 
    $('.titel1').removeClass('selected'); 
    $('.name1').removeClass('selected'); 
    $('.foto1').addClass('selected'); 
}); 

$('.name').click(function() { 
    $('.foto1').removeClass('selected'); 
    $('.titel1').removeClass('selected'); 
    $('.name1').addClass('selected'); 
}); 


css: 
.selected { 
font-weight:bold; 
}

添加類任何幫助表示讚賞。無論你是完全解決問題還是提供一個鏈接/想法來幫助我自己解決問題。我不是在這裏發帖，因爲我很懶，但我無法解決它，我不知道如何更好地闡明我的問題，找到自己的答案。

即使我使用jquery，我完全正確地使用javascript代替。

非常感謝。

Freubau

來源

2014-07-26 freubau

這個http://jsfiddle.net/3Unhe/2/ –

非常感謝。它的工作原理我只是需要了解它才能使用它，但我相信我會自己解決它。 – freubau

嘗試：

$('.titel1, .foto1, .name1').on("click",function(){ 

    $("."+$(this).attr("class").substr(0, $(this).attr("class").length-1)) 
    .addClass("selected") 
    .siblings() 
    .removeClass("selected"); 

});

這將尋找具有相同類名的點擊的元素具有的元素，但是沒有它的最後字符。

鐵：點擊元素.titel1將

添加「selected」類.titel，並
刪除「selected」類從它的兄弟姐妹（.foto和.name）

來源

2014-07-26 12:36:37

它能夠在jsfiddle中工作，所以非常感謝。我現在需要弄清楚如何在我的網站中實現它。 – freubau

不用擔心:)如果您發現我的答案有用，請隨時註冊，如果您已經找到滿意的答案，請接受它。 :)玩得開心編碼！ –

我想，但事實證明我需要15點聲望。：/ – freubau

在這裏你去=>http://jsfiddle.net/3Unhe/4/

$('.titel1, .foto1, .name1').click(function(){ 
    $(this).siblings('.selected').removeClass('selected'); 
    $(this).addClass('selected'); 
});

來源

2014-07-26 12:05:42

謝謝你回覆我的問題。但我不想將類添加到單擊的元素。我想添加一個類到相應的元素。就像在我的例子中，你點擊[selected titel]，它會使[titel]變大。 – freubau

不客氣，這是你想要的嗎？ –

我認爲http://stackoverflow.com/users/1661928/mohit-arora解決了它。 – freubau

選擇元素並將類[selected]添加到其他元素，同時從所有其他類中刪除類[selected]

回答

相關問題