2012-07-10 63 views
1

背景:jQuery的CSS選擇怪癖

我有一個CMS工具,允許用戶創建內容區域內的表。如果使用邊框選項,該工具會在表格上設置邊框屬性,並且不使用樣式。我的重置樣式表默認所有表爲無邊框,並且這會覆蓋表格邊框屬性(即不顯示邊框)。

作爲一種快速入侵,我放入了一些jQuery來獲取具有非0邊界屬性的表元素並將邊界屬性轉換爲內聯樣式。

我的問題:

雖然我能得到的代碼工作,這不是我本來打算解決方案。

這是目前工作:

$("table[border!='0']").css('border', function() { 
     return $(this).attr('border') + "px solid"; 
    }); 

我原來的解決方案是不是需要在CSS方法的功能 - 正如我寫這篇文章的問題是$(本)沒有按

$("table[border!='0']").css('border', $(this).attr('border') + "px solid"); 

我知道不會在選擇中引用每個項目,因爲它在函數內部,因此是我的問題。

jsFiddle

有沒有辦法做到這一點沒有作用?

+0

您發佈的代碼無法正常工作,因爲'.attr'是一個函數,所以'.attr ['border']'是未定義的。 – ThiefMaster 2012-07-10 11:34:56

+0

使用一個函數作爲CSS的第二個參數在我看來,像這樣做的正確和優雅的方式。你總是可以將它分成多行來避免函數,但是由於你正在處理一組對象,這將是一件痛苦的事情。總之,你目前的方式是最好的方式。 – techfoobar 2012-07-10 11:38:58

回答

1

不,使用該功能是唯一的(也是最好的)方式,否則您無法單獨訪問每個項目。

請注意,您的代碼包含一個錯誤:$(this).attr['border']應該是$(this).attr('border') - 否則總是得到undefinedpx solid,這沒有多大意義。

但是,只要你沒有一噸的不同值的border你可以使用CSS:

table[border=1] { border: 1px solid; } 
table[border=2] { border: 2px solid; } 

顯然,這將是凌亂與許多不同的值,但有很好的機會你不t有許多不同的邊框寬度。

+0

感謝您提供錯誤信息 - 我的網站上顯示正確,但沒有正確輸入。 – 2012-07-10 11:43:13

+0

我喜歡CSS方法 - 這可能更好,而不是在每個頁面加載上運行代碼。 – 2012-07-10 11:49:52