我对 JS 和 Jquery 还很陌生。所以我遇到了编码挑战，其中我必须选择多张卡片并确保在检查复选框时背景颜色发生变化。一点想法是我知道我必须确保它是一个数组（我的意思是卡片）。但由于某种原因，我无法全神贯注，而且我已经没有想法了。任何帮助将不胜感激。下面是我的代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <style> .cards-wrapper { display: flex; flex-wrap: wrap; columns: 4; } .cards-wrapper .card { flex-grow: 1; margin: 10px; width: 150px; } .ui-selected { background-color: red; } </style></head><body> <section class="container-lg"> <div class="cards-wrapper" id="card-div-wrapper"> <div class="card"> <div class="card-header" id="card-header-id"> <span>Sample Title</span> <span style="float: right;"><input type="checkbox" id="checkbox-id"></span> </div> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>
1 回答
人到中年有点甜
TA贡献1895条经验 获得超7个赞
您在多个地方使用相同的 id，这是行不通的，因为 id 属性必须是唯一的，而且 css 类.ui-selected需要更具体。
至于事件侦听器，您可以change向复选框添加侦听器并使用 jQuery.closest()方法查找父卡。
这是一个简短的 jQuery 工作示例：
$(() => {
$("input[type=checkbox]").on("change", e => {
$(e.target).closest(".card").toggleClass("ui-selected")
})
})
.cards-wrapper {
display: flex;
flex-wrap: wrap;
columns: 4;
}
.cards-wrapper .card {
flex-grow: 1;
margin: 10px;
width: 150px;
}
.card.ui-selected { /* This selector must be more specific */
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<section class="container-lg">
<div class="cards-wrapper" id="card-div-wrapper">
<div class="card">
<div class="card-header">
<span>Sample Title</span>
<span style="float: right;"><input type="checkbox"></span>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card">
<div class="card-header">
<span>Sample Title</span>
<span style="float: right;"><input type="checkbox"></span>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card">
<div class="card-header">
<span>Sample Title</span>
<span style="float: right;"><input type="checkbox"></span>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card">
<div class="card-header">
<span>Sample Title</span>
<span style="float: right;"><input type="checkbox"></span>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</section>
- 1 回答
- 0 关注
- 45 浏览
添加回答
举报
0/150
提交
取消