2011-01-20 7 views
0

저는 JQuery에 매우 익숙합니다. 사실 제가 작성한 첫 번째 스크립트입니다. 다음은 단순히 "TestDIV"클래스를 가진 모든 DIV를 찾은 다음 그 안에 들어있는 입력에 대해 몇 가지 연산을 수행합니다.JQuery에서 borderColor를 변경하는 문제가 발생했습니다.

모든 것은 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 클링 노트로하지만, 아래의 코멘트에, 그것은 CamelCase를 따옴표로 것에 대해 문제가되지 않는다) : 당신이 jQuery를 사용하고있는 점을 감안

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 

, 당신이 삭제하려는 input 요소를 가지고, val()보다는 attr()를 사용하는 것이 더 쉬울 수 있습니다 당신은의 borderColor 변수 잘못 적용하고

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

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

.... 둘 다 작동합니다. 'css'에 객체를 전달할 때만, 문자열이 아닌 키를 사용한다면'borderColor'가되어야합니다. –

+0

@Felix Kling : 정말요? 나는 항상 변수와 비슷하게 작동한다고 가정 했었습니다 (문자열에서 '보간'되지 않을 것임). 왜 내가 그렇게 생각하는지 모르겠다. 감사! –

0

.

$(this).css("borderColor","red"); 
+3

이것은 텍스트 색상을 설정합니다;) –

+0

아, 네. 물론 "borderColor"를 의미했습니다. – Damien

+0

답변을 업데이트했습니다. – Damien

1

반드시 : $(this).css("borderColor","red")이어야합니다. '나는 당신은 크롬과 사파리의 줄임말 울부 짖는 소리를 사용할 수 있습니다

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

이 너무 작동 할 수 그것을지지하지 마라.

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

따라서 브라우저 호환성을 위해보다 구체적인 표기법을 사용해야합니다. 대신이 하나를 사용할 수 있습니다 :`borderColor` 또는`국경 color`인지는 중요하지 않습니다

0

텍스트 상자의 테두리 스타일에 대해 동일한 양식을 사용했기 때문에

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

하지만 모질라 돈 :

관련 문제