2012-07-15 186 views
0

jQuery選擇:動態屬性jQuery選擇ATTR( '爲= 「*」')

//left side 
$('section.abstract label.gcsubheader') 
//right side 
$('fieldset.abstract label.formElems') 

都返回:(與類不同,但for="*"保持相同)

<label for=​"design" class=​"displayHidden formElems">​Design​</label>​ 
<label for=​"expertise" class=​"displayHidden formElems">​Expertise​</label>​ 
<label for=​"skills" class=​"displayHidden formElems">​Skills​</label>​ 
<label for=​"tools" class=​"displayHidden formElems">​Tools​</label>​ 
<label for=​"projects" class=​"displayHidden formElems">​Projects​</label>​ 
<label for=​"community" class=​"displayHidden formElems">​Community​</label>​ 
<label for=​"interests" class=​"displayHidden formElems">​Interests​</label>​ 

我想向左邊的選擇器添加類似於以下內容的東西:

.find($('label[for="' + $(this).text().toLowerCase() + '"]')) 

var $this = $(this).text().toLowerCase(); //and use the $this in the concatenation: 

完成與labels for="design"一樣的選擇元素,如選擇器($('label[for="design"]')),但通過動態執行。這個想法是,我第一次嘗試重構,並且有很多元素,當我點擊一個元素時,我想找到它自己,而另一個分享它的字符串。

我曾嘗試:

$('section.abstract label.gcsubheader').click(function() { 
    var $this = $(this).text().toLowerCase(); 
    //left element - hide 
    $('section.abstract label.gcsubheader')..find($('label[for="' + $this + '"]')).show(); 
    //Right Side - show 
    $('fieldset.abstract label.formElems').find($('label[for="' + $this + '"]')).show(); 
} 

$('fieldset.abstract label.formElems').find($('label[for="' + $(this).text().toLowerCase() + '"]')).show(); 

不知道我做錯了。我是否必須允許另一層抽象來抓取/定義元素的文本,或者是我的語法錯誤,還是其他的錯誤?我希望能得到這個,所以後來我可以切換左,右的.hidden類,提供了代碼的一個非常強大的重構,也許這樣的事情?:

$('label[for="*"]').click(function() { 
    // for each .toggleClass('hidden'); 
} 

雖然不太清楚怎麼寫*for each或者,但我會到達那裏。非常感謝您的幫助。

回答

1

在調用第一個find()之前,您還有一個額外的.,並且將未封閉的字符串文字作爲參數傳遞給它。注意內部函數和click方法的右括號。當您可能想要.hide()時,您還在使用.show()作爲左側元素。

此外,這是完全正常的追加屬性等於選擇像這樣原來的選擇語句(我沒有完整的HTML,所以選擇可能需要進行調整一點點):

$('section.abstract label.gcsubheader').click(function() { 
    var $this = $(this).text().toLowerCase(); 

    //left element - hide 
    $('section.abstract label.gcsubheader[for="' + $this + '"]').hide(); 

    //Right Side - show 
    $('fieldset.abstract label.formElems[for="' + $this + '"]').show(); 
}); 

至於綁定到您的任何標籤,請考慮使用has-attribute selector而不是for='*'

$('label[for]').click(/* ... */);