我對 JS 和 Jquery 還很陌生。所以我遇到了編碼挑戰(zhàn)，其中我必須選擇多張卡片并確保在檢查復(fù)選框時背景顏色發(fā)生變化。一點(diǎn)想法是我知道我必須確保它是一個數(shù)組（我的意思是卡片）。但由于某種原因，我無法全神貫注，而且我已經(jīng)沒有想法了。任何幫助將不勝感激。下面是我的代碼：<!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 回答
人到中年有點(diǎn)甜
TA貢獻(xiàn)1895條經(jīng)驗 獲得超7個贊
您在多個地方使用相同的 id，這是行不通的，因為 id 屬性必須是唯一的，而且 css 類.ui-selected需要更具體。
至于事件偵聽器，您可以change向復(fù)選框添加偵聽器并使用 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 關(guān)注
- 125 瀏覽
添加回答
舉報
0/150
提交
取消