选择 Div 容器/包装器内的多个 Div 卡
我对 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回答
-
人到中年有点甜
您在多个地方使用相同的 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>
随时随地看视频慕课网APP
相关分类
Html5