我正在尝试更改元素的背景颜色和它的孩子。所以我写了一个function
递归调用。
以下是元素的背景颜色如果具有属性class="irmNDrdnVal"
或id="irmNDatePickerContainer"
则不应更改的一些条件。
以下是代码:
<!DOCTYPE HTML PUBLIC>
<html>
<style>
.newClass{
color:red;
background:green;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<body>
<div id="main">
<span id= "drdn-box-ACNT" class="irmNDrdnInputBox" disabled= "true">
<input id="drdn-ip-ACNT" class="irmNDrdnInput" readOnly="readOnly" value="1 IA" type="text">
<span><img src="/sap/bc/bsp/sap/public/drdn-btn.gif"></span>
</span>
<div id= "drdn-val-ACNT" class="irmNDrdnVal">
<div>
<ul>
<li disabled= "true" key= ""> </li>
<li disabled= "true" key= "1">1 IA</li>
<li disabled= "true" key= "2">2 PB & CB</li>
<li disabled= "true" key= "3">3 DM-P</li>
<li disabled= "true" key= "4">4 DM-R</li>
<li disabled= "true" key= "5">5 Cash App</li>
</ul>
</div>
</div>
</div>
<script>
function changeBgColor(_ele,_cls,_remove){
if(_remove){
_ele.removeClass(_cls);
}
else{
if(!_ele.hasClass('ui-resizable-handle') && !_ele.hasClass('irmNDrdnVal') && _ele.attr('id') != 'irmNDatePickerContainer'){
_ele.addClass(_cls);
}
}
if(_ele.children().length > 0 && !_ele.hasClass('irmNDrdnVal') && _ele.attr('id') != 'irmNDatePickerContainer'){
changeBgColor(_ele.children(),_cls,_remove);
}
}
$('div#main').each(function(){
changeBgColor($(this),'newClass',false);
});
</script>
</body>
</html>
所以我正在检查特定元素是否具有类irmNDrdnVal
。如果它没有类'irmNDrdnVal'
,我将允许更改背景。
除了一个元素之外,它正在处理每个元素.i.e
<span id= "drdn-box-ACNT" class="irmNDrdnInputBox" disabled= "true">
虽然它没有类'irmNDrdnVal'
,但hasClass('irmNDrdnVal')
方法会为元素返回true
。
我无法理解whtz出错了。
有人可以帮助我.....在此先感谢...
答案 0 :(得分:2)
嗯,代码是不可读的,但我猜问题就在这里:
changeBgColor(_ele.children(), _cls, _remove);
如果将所有子项传递给changeBgColor,那么它们都将在_ele(这是jQuery元素集)中,如果只有一个子元素具有类irmNDrdnVal,那么_ele.hasClass('irmNDrdnVal')将对整个集合返回true。尝试改变它,如
_ele.children().each(function(){
changeBgColor($(this), _cls, _remove);
})
另外,为了调试目的,尽量让代码更具可读性;)