jQueryコードをJavascriptに変換する

Javascriptと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で実装したかっただけ誰も私が純粋なJavascriptのにこれを変換することができ、それはjQueryを使って作業を取得することができた：私は、様々なStackOverflowの質問から一緒にいくつかのjQueryをハッキングによって実装することができました？

出典

2012-03-01 user1152142

なぜですか？あなたはjQueryでこれをしないという圧倒的な理由がありますか？ –

jQuery _is_ Javascript。何を試しましたか？なぜあなたはjQueryが好きではないのですか？ – SLaks

コメントありがとうございます。私は、jQueryはJavascriptライブラリであり、Javascriptであることを理解しています。これは、主に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オブジェクト" を作成します。配列のメンバーは、セレクタによって選択された要素です。この場合、1つの要素だけが選択されるようにIDを使用しています。これは、要素が変更イベントを受信したときに呼び出されますどのような要素にのonchangeリスナーを追加するためにjQueryオブジェクトのメソッドを呼び出す

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

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

：置き換えることができます。あなたが唯一の変更リスナーが必要な場合は、のonchangeプロパティにそれを添付することができます

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

しかし、要素は何をするので、より良いnullのかもしれません：

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に変換する

答えて

関連する問題