猿问

选择 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>



白衣染霜花
浏览 81回答 1
1回答

人到中年有点甜

您在多个地方使用相同的 id，这是行不通的，因为 id 属性必须是唯一的，而且 css 类.ui-selected需要更具体。至于事件侦听器，您可以change向复选框添加侦听器并使用 jQuery.closest()方法查找父卡。这是一个简短的 jQuery 工作示例：$(() => {&nbsp; $("input[type=checkbox]").on("change", e => {&nbsp; &nbsp; $(e.target).closest(".card").toggleClass("ui-selected")&nbsp; })}).cards-wrapper {&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; columns: 4;}.cards-wrapper .card {&nbsp; flex-grow: 1;&nbsp; margin: 10px;&nbsp; width: 150px;}.card.ui-selected { /* This selector must be more specific */&nbsp; 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">&nbsp; <div class="cards-wrapper" id="card-div-wrapper">&nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; <div class="card-header">&nbsp; &nbsp; &nbsp; &nbsp; <span>Sample Title</span>&nbsp; &nbsp; &nbsp; &nbsp; <span style="float: right;"><input type="checkbox"></span>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; <h5 class="card-title">Special title treatment</h5>&nbsp; &nbsp; &nbsp; &nbsp; <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="btn btn-primary">Go somewhere</a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; <div class="card-header">&nbsp; &nbsp; &nbsp; &nbsp; <span>Sample Title</span>&nbsp; &nbsp; &nbsp; &nbsp; <span style="float: right;"><input type="checkbox"></span>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; <h5 class="card-title">Special title treatment</h5>&nbsp; &nbsp; &nbsp; &nbsp; <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="btn btn-primary">Go somewhere</a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; <div class="card-header">&nbsp; &nbsp; &nbsp; &nbsp; <span>Sample Title</span>&nbsp; &nbsp; &nbsp; &nbsp; <span style="float: right;"><input type="checkbox"></span>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; <h5 class="card-title">Special title treatment</h5>&nbsp; &nbsp; &nbsp; &nbsp; <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="btn btn-primary">Go somewhere</a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; <div class="card-header">&nbsp; &nbsp; &nbsp; &nbsp; <span>Sample Title</span>&nbsp; &nbsp; &nbsp; &nbsp; <span style="float: right;"><input type="checkbox"></span>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; <h5 class="card-title">Special title treatment</h5>&nbsp; &nbsp; &nbsp; &nbsp; <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="btn btn-primary">Go somewhere</a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></section>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答