2012-07-21 71 views
2

爲什麼$('*[lang|="de"][lang|="sv"]').hide();不選擇,然後用lang =「de」和lang =「se」屬性隱藏所有h1s,h2s和ps?例如與選擇具有多個屬性的多個元素(語言切換器)

<p lang="de">Lorem Ipsum ist ein einfacher Blindtext für die Druckindustrie.</p> 
<p lang="en">Lorem Ipsum is simply dummy text of the printing industry.</p> 
<p lang="sv">Lorem Ipsum är en utfyllnadstext från tryckindustrin.</p> 

我是一個很簡單的三重語言選擇(默認爲英文顯示)像

<script type="text/javascript"> 
$('*[lang|="de"][lang|="sv"]').hide(); 

$("#lang_de").click(function (event) { 
event.preventDefault(); 
$('*[lang|="en"][lang|="sv"]').hide(); 
$('*[lang|="de"]').show(); 
}); 

$("#lang_sv").click(function (event) { 
event.preventDefault(); 
$('*[lang|="de"][lang|="en"]').hide(); 
$('*[lang|="sv"]').show(); 
}); 
</script> 

能屬性選擇不這樣合併後?

編輯:這很適合我現在

(function() { 
$('*[lang|="de"], *[lang|="sv"]').hide(); 

$("#lang_de").click(function (event) { 
    event.preventDefault(); 
    $('*[lang|="en"], *[lang|="sv"]').hide(); 
    $('*[lang|="de"]').show(); 
}); 

$("#lang_sv").click(function (event) { 
    event.preventDefault(); 
    $('*[lang|="de"], *[lang|="en"]').hide(); 
    $('*[lang|="sv"]').show(); 
}); 
})(); 

回答

2

退房的jsfiddle

你需要有jQuery中multiple selectors時添加一個逗號。它應該看起來像

$('*[lang|="de"], *[lang|="sv"]').hide(); 

我也修復了您的點擊事件。它也沒有工作。它也需要通過*[lang|="de"]呼叫來選擇。你可以在jsfiddle中看到一個工作示例。

這裏是Multiple Selector

不完全是你的語言切換器的implematition的jQuery的文檔。但是,如果您正在尋找在每種語言做了整個網站,而不是寫出來你的網站多次,看看這個職位Multi Language網站

**更新**

看到這個jsfiddle因爲不使用*作爲選擇器的一部分

+0

謝謝,逗號可以做到這一點。我確實看到過多個屬性不是逗號分隔的例子;或者它可能是一個類和一個無效的屬性?只是出於興趣 - 而不是使用可怕的通用選擇器(*),還可以在同一行中指定一個標籤列表(比如h1 h2 p)? – Systembolaget 2012-07-21 17:48:19

+0

當多個屬性不是逗號分隔時,這意味着它是元素中的元素。例子'$('#test .this')'會在例子'

but would not select this
'中得到這個類的元素'你可以看到它會選擇'this'在'test'裏面,但不是外面的那個。在幾分鐘內看到更新的jsfiddle,例如非通用選擇器。 – bretterer 2012-07-21 17:51:58

+0

謝謝,我現在明白了:) – Systembolaget 2012-07-21 17:57:59