初心者のJavascriptのクエリ

Question

私は非常に単純な質問をしています、私はフォーラムを検索しようとしましたが、私は私が必要と考えるものを見つけることができませんでした。以下は、私が期待どおりに動作するスクリプトのビットは次のとおりです。

$(function(){ 

var ProjType = $("#cfs_i3_cf3"); 


$(ProjType).change(function() { 
$("#cfs_h3").css("background-color", "red"); 

alert('okay then!'); 
}); 

}); 

基本的には、ID #cfs_i3_cf3は、ドロップダウンボックスを表し、それが変化し、色が変化します。

私はこれを少し前進させたいと言う：

#cfs_i3_cf3 = A場合、color = Xそうcolor = Y

非常にシンプルですが、構文で苦労し、私はに慣れていないとうまくいけば、それは非常に単純な答えですjavascript。

事前に感謝します。 James

Answer 1

これを行う正しい方法は次のとおりです。 選択ボックスの変更をリッスンし、その変更に応じて選択ボックスの値を取得し、その値が1の場合は段落を赤色に黄色にします。

$(function(){ 
 
    var ProjType = $("#cfs_i3_cf3"); 
 
    $(ProjType).change(function(){ 
 
    if($(this).val() == "1") 
 
    { 
 
     $("#cfs_h3").css("background-color", "red"); 
 
    } 
 
    else 
 
    { 
 
     $("#cfs_h3").css("background-color", "yellow"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="cfs_i3_cf3"> 
 
<option value="" selected disabled>Select</option> 
 
<option value="1">One</option> 
 
<option value="2">Two</option> 
 
</select> 
 
<p id="cfs_h3">THIS IS THE OUTPUT</p>

Answer 2

ただ、追加のリファクタリングを追加します。ごめんなさい！私は単純にjQueryが同じことをしていると思いますが、余分なライブラリを読み込むのはなぜですか？

function switchColor(select){ 
 
    var redOrNot = select.value == 'red' ? true: false; 
 
    var el = document.getElementById('cfs_h3'); 
 

 
    if (redOrNot) { 
 
    el.style.backgroundColor = select.value; 
 
    } else { 
 
    el.style.backgroundColor = select.value; 
 
    } 
 
} 
 

 
/* if you don't need logic, you can simply do 
 
el.style.backgroundColor = select.value; since the color logic 
 
is already embedded in the HTML. 
 
*/

<select id="cfs_i3_cf3" onchange="switchColor(this)"> 
 
<option value="" selected disabled>Select</option> 
 
<option value="red">One</option> 
 
<option value="yellow">Two</option> 
 
</select> 
 
<p id="cfs_h3">THIS IS THE OUTPUT</p>