jQuery的切换方法面临的问题

问题描述

| 嗨， 我有以下HTML

    <div id=\"LineInfoHeader\" class=\"div_header_inner headertitle align_center defaultheadercolor portlet-header-left-padding default_bottom_border default_border_color\"><span class=\"ui-icon ui-icon-minusthick\"></span>Line Item @R_361_4045@ion</div>
**Edit**

    <div class=\"div_content_inner\" id=\"Order_header\"></div>

我正在尝试切换跨度类和Order_header div。 我正在使用以下代码：

$(\".div_header_inner.ui-icon\").toggleClass(\"ui-icon-minusthick\").toggleClass(\"ui-icon-plusthick\").toggle();
}

我不知道为什么它不起作用。 请建议我要去哪里错了。 提前致谢。 你可以在这里看到问题     

解决方法

您的选择器处于关闭状态，它正在查找同时具有类

.div_header_inner

和

.ui-icon

的元素，而不是一个在另一个内部的元素。为此，您需要在它们之间（后代选择器）之间留一个空格，例如：

$(\".div_header_inner .ui-icon\").toggleClass(\"ui-icon-minusthick\").toggleClass(\"ui-icon-plusthick\").toggle();

同样，

.toggleClass()

可以采用多个类（以空格分隔），因此您可以将其缩短为：

$(\".div_header_inner .ui-icon\").toggleClass(\"ui-icon-minusthick ui-icon-plusthick\").toggle();

您可以在这里尝试该版本。但是，现在还不清楚我到底想在哪个元素上添加

.toggle()

，如果是

<div>

，则需要进行一些更改，例如：

$(\".div_header_inner\").toggle().find(\".ui-icon\").toggleClass(\"ui-icon-minusthick ui-icon-plusthick\");

或这个：

$(\".div_header_inner .ui-icon\").toggleClass(\"ui-icon-minusthick ui-icon-plusthick\").parent().toggle();