將jQuery代碼轉換爲Javascript

我對JavaScript和jQuery非常新穎。我試圖實現一個下拉選擇框，其中，當某些項目被選中時，輸入文本框被禁用。我能夠從不同的StackOverflow問題，黑客一起一些jQuery來實現：將jQuery代碼轉換爲Javascript

<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>

我真的很想在Javascript來實現這一點，但只能夠得到它使用jQuery，任何人都可以幫助我轉換成純JavaScript這？

來源

2012-03-01 user1152142

爲什麼？你有沒有在jQuery中這樣做的緊迫原因？ – 2012-03-01 23:57:16

jQuery _is_ Javascript。你嘗試了什麼？你爲什麼不喜歡jQuery？ – SLaks 2012-03-01 23:57:27

感謝您的意見。我明白，jQuery是一個Javascript庫，它是_is_ Javascript。這主要是一個學習練習，我想了解如何在沒有jQuery庫的情況下編寫上面的代碼。 – user1152142 2012-03-02 00:12:10

如果我明白你的代碼的意圖，你可以這樣做。這種遺漏的唯一情況就是隱藏/顯示動畫，就像你使用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

我不會使用「inline」作爲可見的顯示值，使用「」（空字符串）要好得多，因此元素採用其默認值。 – RobG 2012-03-02 00:25:14

@RobG - 這取決於是否有默認的CSS規則生效或不生效。由於這裏的環境並不完全清楚，因此我選擇了更符合顯示風格的文字，但我理解你的觀點。 – jfriend00 2012-03-02 00:31:07

@ jfriend00非常感謝您的回答，非常有幫助 – user1152142 2012-03-02 13:46:31

以它位：

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

$函數創建一個「jQuery對象」，也就是與其他方法的數組。數組的成員是由選擇器選擇的元素。在這種情況下，它使用一個ID，因此只有一個元素被選中。它可以被替換爲：

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

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

這需要jQuery對象的一個方法的平變化監聽器添加到元素時的元素收到變化事件究竟會被調用。如果你只需要一個變化監聽器，那麼你可以將它連接到OnChange屬性：

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

但元素可能爲空，那麼好做：

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代碼轉換爲Javascript

回答

相關問題