Javascript 在复选框勾选时隐藏表行内容

我目前一直在隐藏和显示网页上的内容。内容显示服务器处于联机或脱机状态。由于此列表很长，我想隐藏显示为“活动”的所有服务器，但“关闭”的部署仍将可见

勾选该框将隐藏

标记中等于“LIVE”的所有内容，但等于“DOWN”的

标记仍将可见

仅显示脱机服务器
不
服务器
统一资源定位地址
地位
您的逻辑有几个问题：


$（“向下复选框”）
不是有效的选择器。您缺少类选择器的前导

该复选框不可见。删除
显示：无
标签
的
属性
应该引用
输入
的
id
，而不是它的
类
在处理复选框时使用
更改
事件，而不是
单击
，因为后者存在可访问性问题
您将在jQuery选择器中放置一个HTML字符串以查找“实时”文本。这是不正确的，因为它将创建元素。要搜索元素，请使用有效的选择器。在这种情况下，您可以搜索
.badge success
以仅检索活动实例，然后搜索
closest（）
以获取其父级
tr
再次选中复选框时，
hide（）
将永远不会使行重新出现。更好的方法是使用
toggle（）
传递复选框的布尔
checked
状态，以便根据需要隐藏/显示


$（函数（）{
$（'.down复选框'）.change（函数（）{
$（'.badge danger'）.closest（'tr'）.toggle（选中此项）；
});
});

仅显示脱机服务器
不
服务器
统一资源定位地址
地位
1.
测试
测试，测试，测试
居住
2.
测试
测试，测试，测试
向下
3.
测试
测试，测试，测试
居住
4.
测试
测试，测试，测试
向下
您的逻辑有几个问题：


$（“向下复选框”）
不是有效的选择器。您缺少类选择器的前导

该复选框不可见。删除
显示：无
标签
的
属性
应该引用
输入
的
id
，而不是它的
类
在处理复选框时使用
更改
事件，而不是
单击
，因为后者存在可访问性问题
您将在jQuery选择器中放置一个HTML字符串以查找“实时”文本。这是不正确的，因为它将创建元素。要搜索元素，请使用有效的选择器。在这种情况下，您可以搜索
.badge success
以仅检索活动实例，然后搜索
closest（）
以获取其父级
tr
再次选中复选框时，
hide（）
将永远不会使行重新出现。更好的方法是使用
toggle（）
传递复选框的布尔
checked
状态，以便根据需要隐藏/显示


$（函数（）{
$（'.down复选框'）.change（函数（）{
$（'.badge danger'）.closest（'tr'）.toggle（选中此项）；
});
});

仅显示脱机服务器
不
服务器
统一资源定位地址
地位
1.
测试
测试，测试，测试
居住
2.
测试
测试，测试，测试
向下
3.
测试
测试，测试，测试
居住
4.
测试
测试，测试，测试
向下

$（“向下复选框”）。单击（函数（）{
$（“td.badge”）。每个（函数（）{
如果（$（$this.text（）=“LIVE”）{
$（$this.hide（）；
}
else if（$（$this.text（）=“向下”）{
$（$this.show（）；
}
});
});

您还可以使用反向逻辑显示和隐藏基于活动/停止的状态

$（“向下复选框”）。单击（函数（）{
$（“td.badge”）。每个（函数（）{
如果（$（$this.text（）=“LIVE”）{
$（$this.hide（）；
}
else if（$（$this.text（）=“向下”）{
$（$this.show（）；
}
});
});

您还可以使用反向逻辑来显示和隐藏基于活动/停止的状态
完全符合Rory的回答，但是如果您现在不关心重构，请尝试使用jQuery选择器：

$('span.badge.badge-success:contains("LIVE")').hide();

请注意，您没有将HTML标记放在其中，因为这样做实际上是在操作现有标记


为了说明我的观点，这里有一个快速演示，重点介绍两种方法之间的区别：


$（'btn create'）。单击（函数（）{
//这将动态创建一个新元素
//并将其附加到类为“container”的div中
$（''）.appendTo（'div.container'）；
});
$（“#btn操纵”）。单击（函数（）{
//这将操纵现有的“img”元素，而不是创建一个新的类似元素
$（'img'）.css（'width'，'150px'）；
})
.container{
背景颜色：浅绿色；
显示：内联块；
浮动：左；
右边距：10px；
高度：200px；
宽度：200px；
}

创建新元素
操纵现有元素
完全同意Rory的回答，但如果您现在不关心重构，请尝试一下jQuery选择器：

$('span.badge.badge-success:contains("LIVE")').hide();

请注意，您没有将HTML标记放在其中，因为这样做实际上是在操作现有标记


为了说明我的观点，这里有一个快速的演示，突出了b的区别
<script>
$(".down-checkbox").click(function(){
    $.each($(".badge.badge-success"), function(){
        $(this).closest("tr").hide();
    });
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$(document).ready(function() {
$('#hidelive').click(function(e) {
$.each($(".badge"), function(){
if($(this).is(':contains("LIVE")')) {
$(this).closest("tr").toggle();
}
});
});
});
</script>

<div id="hidelive">Only show offline servers</div>