2011-01-20 47 views
0

我對JQuery非常陌生,實際上這是我寫過的第一個腳本。下面簡單地找到所有具有類「TestDIV」的DIV,然後在發現其中的輸入時執行一些操作。在JQuery中更改borderColor的問題

除了borderColor,它仍然是我最初設置的顏色。有人對此有何看法?我也非常歡迎有關如何改進我的代碼的提示。

function hideAndShowJQ(show) { 
     var hideColor = "#DFDFDF"; 
     //Find DIVs and modify styling 
     var div = $('div.TestDIV'); //Find relevant divs 
     div.css('color', (show) ? "" : hideColor) //Change text colour 
      .find(':input').attr("disabled", !show) //Disable any inputs 
      .attr("borderColor", "red") //Change border colour of inputs 
      .attr("value", ""); //Clear any existing input text 
} 

回答

5

問題是borderColor不是元素的屬性,它是一個CSS屬性。

要更改css屬性/值,請使用css()。此外,使用引號時,它的"border-color"borderColor(雖然作爲@Felix克林指出,在下面的意見,沒關係關於駝峯引號是):

div.css('color', (show) ? "" : hideColor) //Change text colour 
      .find(':input').attr("disabled", !show) //Disable any inputs 
      .css("border-color", "red") //Change border colour of inputs 
      .attr("value", ""); //Clear any existing input text 

假設你正在使用jQuery,並有要清除input元素,它可能是更容易使用val(),而不是attr()

.val(''); // sets the value of the input to an empty string. 
+2

不要緊,無論是`borderColor`或`邊界color`。兩者都可以工作。只有當你傳遞一個對象到`css`時,如果你使用非字符串鍵,它必須是`borderColor`。 – 2011-01-20 10:49:33

+0

@Felix Kling:真的嗎?我總是認爲它的工作方式與變量類似(因爲它們不會被字符串內插)。不過,我不知道我爲什麼這麼想。謝謝! – 2011-01-20 10:51:47

0

你申請的BORDERCOLOR變量是錯誤的。

$(this).css("borderColor","red"); 
1

應該是:$(this).css("borderColor","red")

2

這可能工作太:

$('#div-name :input').attr("disabled", !show); 

,因爲我用同樣的形式爲文本框

$('#div-name :input').attr("style", ""); 
0

您可以使用速記符號波紋管在Chrome和Safari的邊框樣式,但Mozilla的不要」不支持它。

$(this).css("borderColor"); 

所以你必須使用更具體的符號瀏覽器的兼容性。你可以用這個來代替一個:

$(this).css("border-top-color"); 
$(this).css("border-right-color"); 

等等