jQuery addClassとremoveClass onchangeの問題

Question

jQueryのaddClassとremoveClassをフォーム選択環境で動作させようとしていますが、ほとんど成功しません。

私は親divのクラスを修正したいのですが、関数内でIDを渡そうとしましたが、すべての試みは無駄でした。どんな方向性と支援も大いに評価されるだろう。

<div id="MaxAge" class="SearchFormStyle"> 
       <select name="maxage" onchange="addClass(MaxAge);"> 
        <option value="0">Age</option> 
        <option value="1" >1 Year Old</option> 
        <option value="2" >2 Years Old</option> 
       </select> 
        <span class="ThisValue"> 
         <a href="#" onclick="RemoveClass(MaxAge)">VALUE ENTERED HERE</a> 
        </span> 
       </div> 

<script> 
    function addClass (id) { 
     div = "#" + id; 
     $(div).addClass("InputSet"); 
    } 
    function RemoveClass (id) { 
     div = "#" + id; 
     $(div).removeClass("InputSet"); 
    } 
</script> 

Answer 1

addClass(MaxAge)addClassに変数MaxAgeの値ではなく、文字列'MaxAge'を渡します。

以外にも、あなたは本当に代わりに、インラインのイベントハンドラのイベントハンドラをバインドするためにjQueryを使用する必要があります。

$("select[name='maxage']").change(function() { 
    addClass('MaxAge'); 
}); 

$('.ThisValue a').click(function(event) { 
    RemoveClass('MaxAge'); 
    event.preventDefault(); 
}); 

イベントハンドラの詳細については、私はarticles at quirksmode.orgを読むことをお勧めします。

---

addClassとRemoveClassでdiv変数はグローバルているような他の問題もあります。変数を宣言するときは、varを忘れないでください。また、関数の名前は一貫していませんadd対Remove。

MDN JavaScript Guideは、JavaScriptの基礎を学ぶのに非常に適しています。

Answer 2

あなたはほとんど正しい方法でやっています。ここで私は何をしますか（あなたのためのコメントあり）

// onchange event of the selectbox with id = maxage 
$("#maxage").change(function() { 
    $("#MaxAge").addClass("InputSet"); 
}); 

// the click event for the a element within span with class ThisValue 
$("span.ThisValue a").click(function(e) { 
    // prevent doing default behaviour like going to another location... 
    e.preventDefault(); 
    $("#MaxAge").removeClass("InputSet"); 
}); 

Answer 3

div変数をインスタンス化することは決してありません。

これを試してみてください：

var div = "#" + id;