CODEWITHSUNDEEP
javascriptjqueryhtml
Kenneth Ballon
Kenneth Ballon

Reputation: 3

Select Multiple Div Cards Inside a Div Container/Wrapper

I'm still new to JS and Jquery. So I have this coding challenge wherein I have to select mulitple cards and make sure that the background-color change on checking the Checkbox.

A little bit of idea is that I know I have to make sure that it is an array (I mean the cards). But for some reason I cannot wrap my head around it and I'm running out of ideas. Any help will be appreciated.

Here's my code below:

<!DOCTYPE html>
<html lang="en">

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

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

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

            <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>
        </div>
    </section>
    <script type="text/javascript">
        let x = document.getElementById('card-div-wrapper').querySelectorAll('.card');
        let changeBg = document.getElementById('card-header-id');

        $().ready(function () {
            x.forEach(element => {
                $(element).click(function () { // i know this shouldn't be a click function I'm no sure
                    $(changeBg).click(function () { // this should be the click function that would change the bg
                        $(this).toggleClass("ui-selected");
                    });
                });
            });
        });
    </script>

</body>

</html>

Upvotes: 0

Views: 1037

Answers (1)

Anurag Srivastava
Anurag Srivastava

Reputation: 14433

You are using same ids at multiple places which will not work as id attributes must be unique, also the css class .ui-selected needs to be more specific.

As for your event listener, you can add an change listener to the checkboxes and find the parent card using the jQuery .closest() method.

Here's a shorter working example with 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>

Upvotes: 1

Related Questions