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)将可变MaxAge的值传递给addClass，不是字符串'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 vs 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;