Javascript 隐藏没有类的项

我试图

隐藏（）子列表

没有活动的

类，则编码>所有
子项
。
子列表
接收
活动
类（如果该类属于所选主类别）（单击Main1或main2）

我尝试了此代码，但没有成功：

var item = $(".sub-list");

if (!$(item).hasClass("active")) {
  $(item)
    .closest(".sub-item")
    .hide();
} else {
  $(item)
    .closest(".sub-item")
    .show();
}

在代码段中，
子项
不
hide（）即使
子列表
接收到
活动
类。如何隐藏所有具有
活动类的
子项


$（文档）.ready（函数（）{
功能切换SubcatDiv（输入，显示类型列表）{
变量$list=$（输入）。最近（“.post项”）；
美元清单
.find（“子列表”）
.filter（“.active”）
.removeClass（“活动”）
(完)
.filter（“[data for=“”+$（输入）.attr（“名称”）+“]”]）
.addClass（“主动”）；
}
$（此）.on（“单击click.init”，“.cat项”，函数（e）{
var$menu=$（this）.closest（“.cat下拉列表”）；
变量项=$（“.sub-list”）；
if（！$（项目）.hasClass（“活动”））{
$（项目）
.最近（“.分项”）
.hide（）；
}否则{
$（项目）
.最近（“.分项”）
.show（）；
}
美元菜单
.find（“.title”）
.children（“：复选框”）
.prop（“选中”，为真）
.next（“span”）
.text（$（this）.text（））
.css（“color”，this.style.color）；
切换subcatdiv（$（“：radio”，this），“init”！==e.namespace）；
});
});
。子项{
最小高度：10px
}
B.分项投入{
显示：无
}
.cat1{
边框：2件纯蓝；
}
.第二类{
边框：2倍纯红；
}
.子列表：非（.active）{
显示：无；
}

主要类别：
选择。。。
主要1
主要2
子类别：

主要1A

主要1B

主要2A

主要2B

主要2C
项已经是jquery对象，无需再次使用$（），您可以尝试以下操作：

var $item = $(".sub-list");

if (!$item.hasClass("active")) {
  $item
    .closest(".sub-item")
    .hide();
} else {
  $item
    .closest(".sub-item")
    .show();
}

项已经是jquery对象，无需再次使用$（），您可以尝试以下操作：

var $item = $(".sub-list");

if (!$item.hasClass("active")) {
  $item
    .closest(".sub-item")
    .hide();
} else {
  $item
    .closest(".sub-item")
    .show();
}

问题是由返回多个元素引起的

因此，当您使用
.hasClass（）
进行测试时，始终会得到
true
，因为至少有一个返回的元素具有该类

必须运行
.each（）
循环来分别测试所有元素：

var item = $(".sub-list");

item.each(function(){
  if (!$(this).hasClass("active")) {
    $(this)
      .closest(".sub-item")
      .hide();
  } else {
    $(this)
      .closest(".sub-item")
      .show();
  }
});

我还为单选按钮添加了一个快速修复。。。要取消选中其他选项，请执行以下操作：

$(".cat-item").not(this).find("input").prop("checked",false);



您的代码段已通过上述更改修复：


$（文档）.ready（函数（）{
功能切换SubcatDiv（输入，显示类型列表）{
变量$list=$（输入）。最近（“.post项”）；
美元清单
.find（“子列表”）
.filter（“.active”）
.removeClass（“活动”）
(完)
.filter（“[data for=“”+$（输入）.attr（“名称”）+“]”]）
.addClass（“主动”）；
}
$（此）.on（“单击click.init”，“.cat项”，函数（e）{
$（“.cat item”）.not（this）.find（“input”）.prop（“checked”，false）；
var$menu=$（this）.closest（“.cat下拉列表”）；
变量项=$（“.sub-list”）；
项目.每个（功能（）{
if（！$（this.hasClass（“活动”））{
$（本）
.最近（“.分项”）
.hide（）；
}否则{
$（本）
.最近（“.分项”）
.show（）；
}
});
美元菜单
.find（“.title”）
.children（“：复选框”）
.prop（“选中”，为真）
.next（“span”）
.text（$（this）.text（））
.css（“color”，this.style.color）；
切换subcatdiv（$（“：radio”，this），“init”！==e.namespace）；
});
});
。子项{
最小高度：10px
}
B.分项投入{
显示：无
}
.cat1{
边框：2件纯蓝；
}
.第二类{
边框：2倍纯红；
}
.子列表：非（.active）{
显示：无；
}

主要类别：
选择。。。
主要1
主要2
子类别：

主要1A

主要1B

主要2A

主要2B

主要2C
问题是由返回多个元素引起的

因此，当您使用
.hasClass（）
进行测试时，始终会得到
true
，因为至少有一个返回的元素具有该类

必须运行
.each（）
循环来分别测试所有元素：

var item = $(".sub-list");

item.each(function(){
  if (!$(this).hasClass("active")) {
    $(this)
      .closest(".sub-item")
      .hide();
  } else {
    $(this)
      .closest(".sub-item")
      .show();
  }
});

我还为单选按钮添加了一个快速修复。。。要取消选中其他选项，请执行以下操作：

$(".cat-item").not(this).find("input").prop("checked",false);



您的代码段已通过上述更改修复：


$（文档）.ready（函数（）{
功能切换SubcatDiv（输入，显示类型列表）{
变量$list=$（输入）。最近（“.post项”）；
美元清单
.find（“子列表”）
.filter（“.active”）
.removeClass（“活动”）
(完)
.filter（“[data for=“”+$（输入）.attr（“名称”）+“]”]）
.addClass（“主动”）；
}
$（此）.on（“单击click.init”，“.cat项”，函数（e）{
$（“.cat item”）.not（this）.find（“input”）.prop（“checked”，false）；
var$menu=$（this）.closest（“.cat下拉列表”）；
变量项=$（“.sub-list”）；
项目.每个（功能（）{
if（！$（this.hasClass（“活动”））{
$（本）
.最近（“.分项”）
.hide（）；
}否则{
$（本）
.最近（“.分项”）
.show（）；
}
});
美元菜单
.find（“.title”）
.children（“：复选框”）
.prop（“选中”，为真）
.next（“span”）
.text（$（this）.text（））
.css（“color”，this.style.color）；
切换subcatdiv（$（“：radio”，this），“init”！==e.namespace）；
});
});
.sub-ite