如何解决在添加和删除类时面临怪异的问题
| 我有以下用于初始化小部件的功能。jQuery.fn.initPortlet = function( parent_component,header,component ){
var o = $(this[0])
this.addClass(\"ui-widget ui-widget-content ui-corner-all\")
.find(header)
.addClass(\"headertitle\")
.addClass(\"align_center\")
.addClass(\"defaultheadercolor\")
.prepend(\'<span class=\"ui-icon ui-icon-minusthick\"></span>\')
.end()
.find(component);
};
它的作用是在小部件的左上角添加一个减号图标。
我有一些ajax调用,因为该函数被多次调用并多次附加减号图标。
我试图以这种方式重新编写此函数,以便调用该函数多少次,仅在标题中附加一个减号图标。
我尝试过休闲方式,但是没有用。
var $minusthick = $(\'span.ui-icon ui-icon-minusthick\');
$(\'div.div_header\').find($minusthick).remove().prepend(\'<span class=\"ui-icon ui-icon-minusthick\"></span>\').end();
我正在做的是删除所有带有类名称span.ui-icon ui-icon-minusthick的span,最后附加一个减号图标,但这对我不起作用。
编辑
我以这种方式调用此功能-
$(\'.div_portlet\').initPortlet(\'.div_portlet\',\'.div_header\',\'.div_content\')
$(\'.div_portlet_inner\').initPortlet(\'.div_portlet_inner\',\'.div_header_inner\',\'.div_content_inner\');
与此对应的html是-
的HTML:
<div class=\"div_portlet\" id=\"LINEITEM_HEADER\" >
<div class=\"div_header\"><%=hu.getFrameURL(82,83)%> Line Item Header information</div>
<div class=\"div_content\" id=\"LINEITEM_HEADER_CONTENT\">
</div>
</div>
对于第二个调用,html将保持不变,只是类将从div_portlet
变为div_portlet_inne
r,其他类也是如此。
我已经在js文件中编写了此功能。
任何帮助或建议,使我可以实现自己的目标,将不胜感激。
请大家帮我解决这个问题。
提前致谢!!!!!
解决方法
不确定使用哪个变量
o
-但是我下面的更改的基本要点是使用jQueryhasClass()
函数检查该类是否已被应用。
jQuery.fn.initPortlet = function( parent_component,header,component ){
var o = $(this[0])
if (!this.hasClass(\'ui-widget\'))
{
this.addClass(\"ui-widget ui-widget-content ui-corner-all\")
.find(header)
.addClass(\"headertitle\")
.addClass(\"align_center\")
.addClass(\"defaultheadercolor\")
.prepend(\'<span class=\"ui-icon ui-icon-minusthick\"></span>\')
.end()
.find(component);
}
};
,“这个问题”很好地解决了这个问题,但是以下是您尝试失败的原因的说明:
选择器\'span.ui-icon ui-icon-minusthick\'
的第一部分正在按您的意图寻找类为ui-icon
的span
,但是第二部分则寻找类型<ui-icon-minusthick>
的元素,该元素显然不存在。要选择具有多个类名的元素,请将它们全部添加到同一选择器中,就像在CSS中一样:
$(\'span.ui-icon.ui-icon-minusthick\')
当然,您的其余代码将是空手,因为find($minusthick)
不会执行任何操作,因此jQuery链的其余部分将没有上下文可操作。 (我认为)这将按您的预期工作:
$(\'div.div_header\').find(\'span.ui-icon.ui-icon-minusthick\').remove().end().prepend(\'<span class=\"ui-icon ui-icon-minusthick\"></span>\');
额外的end()
调用将jQuery对象返回到第一个选择器,在本例中为div.div_header
,并且不需要最后的end()
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。