我正在尝试让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>
答案 0 :(得分:3)
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。
还有其他问题,例如div
中的addClass
变量和全球中的RemoveClass
。在声明变量时不要忘记var
。此外,函数的命名与add
vs Remove
不一致。
MDN JavaScript Guide非常适合学习JavaScript基础知识。
答案 1 :(得分:0)
你几乎是以正确的方式做到了。这就是我要做的事(给你一些评论)
// 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");
});
答案 2 :(得分:0)
你永远不会实例化div变量。
试试这个:
var div = "#" + id;