javascript - 选中的 addClass 和 toggleClass 上的 jQuery 复选框适用于所有 DIV,而不仅仅是包含 DIV
问题描述
我有一些引导卡,每个卡里面都有一个复选框,当它们被选中时,我需要 2 个类来更改特定的卡 DIV ..
- class="card border-secondary" --> class="card border-success"
- class="card-header" --> class="card-header text-white bg-success"
为此,我在下面的代码片段中有以下 jQuery,但不幸的是它也适用于其他 DIV,并且边框类的切换以某种方式起作用,但并非总是如此:
我该如何解决这个问题,使其仅适用于复选框所在的一个 div,并让边框类的切换一直工作?
$("input[type='checkbox']").change(function() {
if ($(this).is(":checked")) {
$("div.card-header").addClass("text-white bg-success");
$("div.border-secondary").toggleClass("border-success");
} else {
$("div.card-header").removeClass("text-white bg-success");
$("div.border-secondary").toggleClass("border-success");
}
});
.checkbox .cr,
.radio .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: .25em;
width: 1.3em;
height: 1.3em;
float: left;
}
.radio .cr {
border-radius: 50%;
}
.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
position: absolute;
font-size: 1.2em;
line-height: 0;
top: 50%;
left: -5%;
color: #5cb85c;
}
.radio .cr .cr-icon {
margin-left: 0.04em;
}
.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
display: none;
}
.checkbox label input[type="checkbox"]+.cr>.cr-icon,
.radio label input[type="radio"]+.cr>.cr-icon {
transform: scale(3) rotateZ(-20deg);
opacity: 0;
transition: all .3s ease-in;
}
.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon,
.radio label input[type="radio"]:checked+.cr>.cr-icon {
transform: scale(1) rotateZ(0deg);
opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled+.cr,
.radio label input[type="radio"]:disabled+.cr {
opacity: .5;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table cellpadding="6">
<tr style="border-bottom: 0px solid #FFFFFF;">
<td>
<div class="card border-secondary" style="width: 130px;">
<div class="card-header" align="center">Checbox 1</div>
<div class="card-body" align="center">
<div class="checkbox">
<label style="font-size: 2.5em">
<input type="checkbox" name="check1" id="check1" value="">
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
</label>
</div>
</div>
</div>
</td>
<td>
<div class="card border-secondary" style="width: 130px;">
<div class="card-header" align="center">Checbox 2</div>
<div class="card-body" align="center">
<div class="checkbox">
<label style="font-size: 2.5em">
<input type="checkbox" value="" name="check2" id="check2">
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
</label>
</div>
</div>
</div>
</td>
</tr>
</table>
解决方案
您需要更具体,例如“div.card-header”将选择所有卡片标题(如您所知)。使用 'closest' 将向上遍历 DOM 树,而 'find' 将向下遍历,只选择正确的标题。
把js改成这样:
$("input[type='checkbox']").change(function() {
if ($(this).is(":checked")) {
$(this).closest(".card").find(".card-header").addClass("text-white bg-success");
$(this).closest(".card").toggleClass("border-success");
} else {
$(this).closest(".card").find(".card-header").removeClass("text-white bg-success");
$(this).closest(".card").toggleClass("border-success");
}
});
工作示例:jsFiddle
推荐阅读
- groovy - 如何使用 groovy 在 testSuite TearDown 中捕获请求和响应
- git - 在递归 git repo 中断开子模块的链接并使它们独立于原始引用
- reactjs - 是的,填写的字段之一
- c# - 如何将 ASP.NET Core 应用程序和 Redis 一起 dockerize?
- python - Xarray Dataarray查找最大值行
- azure - 在 Azure 容器服务中停止和启动数据时,如何将数据保留在容器中?
- c - 如何修复结构返回函数中的“预期标识符”或“(”之前的“int”错误
- javascript - 从查询字符串中提取数据,然后调用 API 和渲染组件的最佳位置是什么?
- python - 如何在一批图像中找到具有特定值的图像的位置
- java - 从可调用接口将参数传递给函数调用