jQuery 코드를 자바 스크립트로 변환하기

저는 자바 스크립트와 jQuery를 처음 사용합니다. 드롭 다운 선택 상자를 구현하려고합니다. 특정 항목을 선택하면 입력 텍스트 상자가 비활성화됩니다.jQuery 코드를 자바 스크립트로 변환하기

<select name="Severity-of-your-symptoms" id="Severity-of-your-symptoms" class="cformselect" > 
    <option value="full01_severity_notselected" selected="selected">Please select...</option> 
    <option value="full01_severity_other">Mild</option> 
    <option value="full01_severity_other">Moderate</option> 
    <option value="Severe">Severe</option> 
    <option value="full01_severity_other">Other</option> 
</select> 
<br /> 
<input type="text" id="li-10-14" /> 

<input type="text" name="firstname" title="First Name" style="color:#888;" 
    value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" id='color'/> 

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js"></script> 

<script type="text/javascript"> 

$('#Severity-of-your-symptoms').change(function() { 
    $("#li-10-14")[$(this).val() == "full01_severity_other" ? 'show' : 'hide']("fast"); 
}).change(); 

$('#Severity-of-your-symptoms').change(function() { 
    $("#li-10-14")[$(this).val() == "full01_severity_other" ? $('#color').attr("disabled", true) 
: $('#color').attr("disabled", false)] 
}).change(); 

</script>

난 정말 자바 스크립트에서이를 구현하고 싶어하지만 누군가가 나를 순수 자바 스크립트로이를 변환 할 수 있습니다, 그것은 jQuery를 함께 작업 얻을 수있었습니다 : 나는 다양한 유래 질문에서 함께 일부 jQuery를 해킹하여 구현 할 수 있었다 ?

출처

2012-03-01 user1152142

왜? jQuery에서이 작업을 수행하지 않을 이유가 있습니까? –

jQuery _is_ Javascript. 너 무슨 짓을 한거야? 왜 jQuery를 좋아하니? – SLaks

의견 주셔서 감사합니다. 나는 jQuery가 자바 스크립트 라이브러리이고 자바 스크립트라는 것을 알고있다. 주로 jQuery 라이브러리없이 위의 코드를 작성하는 방법을 배우려는 학습 연습입니다. – user1152142

코드의 의도를 이해하면 다음과 같이 할 수 있습니다. 이게 제외 된 유일한 것은 jQuery에서와 같이 숨기거나 보여주기위한 애니메이션입니다.

// this code should be located after the rest of the HTML at the end of the <body> tag 
function checkSeverity() { 
    var displayVal, disabledVal; 
    if (document.getElementById("Severity-of-your-symptoms").value == "full01_severity_other") { 
     displayVal = "inline"; 
     disabledVal = true; 
    } else { 
     displayVal = "none"; 
     disabledVal = false; 
    } 
    document.getElementById("li-10-14").style.display = displayVal; 
    document.getElementById("color").disabled = disabledVal; 
} 

// hook up the event handler 
document.getElementById("Severity-of-your-symptoms").onchange = checkSeverity; 
// call it initially to establish the initial state 
checkSeverity();

당신은 여기서 일 볼 수 있습니다 http://jsfiddle.net/jfriend00/3xGxp/

출처

2012-03-02 00:20:00 jfriend00

표시되는 표시 값에 "인라인"을 사용하지 않고 요소 "빈 문자열"을 사용하는 것이 좋습니다 그것의 디폴트 값. – RobG

@RobG - 효과가있는 기본 CSS 규칙이 있는지 여부에 따라 다릅니다.환경이 여기에서 완전히 알려지지 않았기 때문에, 나는 디스플레이 스타일로 더 문자 적으로 선택했지만, 나는 당신의 요점을 이해합니다. – jfriend00

@ jfriend00 훌륭한 답변을 주셔서 감사합니다. 매우 도움이됩니다. – user1152142

이 비트에 촬영 :

$('#Severity-of-your-symptoms')

은 $ 기능 추가 방법과 배열이다 "jQuery를 객체"를 만듭니다. 배열의 멤버는 선택기에서 선택한 요소입니다. 이 경우 하나의 요소 만 선택되도록 ID를 사용합니다. 그것은으로 대체 될 수 있습니다

var element = document.getElementById('severity-of-your-symptoms'); 

.change(function(){...})

이 요소가 변화 이벤트를 수신 할 때 호출되는 어떤 요소에 onchange를 리스너를 추가하는 jQuery 오브젝트의 메소드를 호출합니다.

element.onchange = function(){...};

을하지만 할 더 나은 있도록 요소는 null이 될 수 있습니다 : 당신은 단지 하나의 변경 리스너가 필요한 경우, 당신은 onchange를 속성에 첨부 할 수 있습니다

if (element) element.onchange = function(){...};

을에서 jQuery를 비트를 제거하려면 그냥 요소를 표시하고 dissaear,하고 싶은 경우 기능 :

function() { 
    var element = document.getElementById('li-10-14'); 

    if (this.value == "full01_severity_other") { 
    element.style.display = element.style.display == 'none'? '' : 'none'; 
    } 
}

아웃/페이드 또는 위/아래 영향을 위하려는 경우, 사람들을 구현하는 매우 간단한 라이브러리가있다.

.change();

당신은 하나의 문으로 전체를 쓸 수 있지만, 나는 그것이 별도의 문으로 유지하기 위해 훨씬 더 강력한 것 같아요 :

마지막있다. 다른 부분을 변환하는 것은 거의 동일합니다.

출처

2012-03-02 00:22:25 RobG

jQuery 코드를 자바 스크립트로 변환하기

답변

관련 문제