0

私はJavascriptとjQueryに非常に慣れていません。ドロップダウン選択ボックスを実装しようとしています。これにより、特定の項目が選択されると、入力テキスト ボックスが無効になります。さまざまな StackOverFlow の質問からいくつかの 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>

これを Javascript で実装したかったのですが、jQuery でしか動作しませんでした。これを純粋な Javascript に変換するのを手伝ってくれる人はいますか?

4

2 に答える 2

2

あなたのコードの意図が理解できれば、このようにすることができます。これが除外する唯一のものは、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-02T00:20:00.630 に答える
1

ビットでそれを取る：

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

$ 関数は、追加のメソッドを持つ配列である「jQuery オブジェクト」を作成します。配列のメンバーは、セレクターによって選択された要素です。この場合、ID を使用しているため、1 つの要素のみが選択されます。次のものに置き換えることができます。

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

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

これは、jQuery オブジェクトのメソッドを呼び出して、要素が変更イベントを受け取ったときに呼び出されるonchangeリスナーを要素に追加します。変更リスナーが 1 つだけ必要な場合は、それを onchange プロパティにアタッチできます。

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

ただし、要素は null である可能性があるため、次のようにすることをお勧めします。

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

関数から jQuery ビットを削除するには、要素を表示して非表示にするだけの場合は、次のようにします。

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

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

フェードイン/アウトまたはスライドアップ/ダウン効果が必要な場合は、それらを実装するための非常に単純なライブラリがあります。

最後に次のとおりです。

.change();

全体を 1 つのステートメントとして記述することもできますが、個別のステートメントとして保持する方がはるかに堅牢だと思います。他の部分の変換はほとんど同じです。

于 2012-03-02T00:22:25.243 に答える