Выберите несколько карт Div внутри контейнера / оболочки Div - PullRequest
Новая
       1

Выберите несколько карт Div внутри контейнера / оболочки Div

0 голосов
/ 24 марта 2020

Я все еще новичок в JS и Jquery. Итак, у меня есть проблема с кодированием, когда я должен выбрать несколько карт и убедиться, что цвет фона меняется при установке флажка.

Немного идеи, что я знаю, что должен убедиться, что это массив (я имею в виду карты). Но по какой-то причине я не могу обернуть голову вокруг этого, и у меня заканчиваются идеи. Любая помощь будет оценена.

Вот мой код ниже: 

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

1 Ответ

1 голос
/ 24 марта 2020

Вы используете одни и те же идентификаторы в нескольких местах, которые не будут работать, поскольку атрибуты идентификатора должны быть уникальными, также css класс .ui-selected должен быть более точным c.

Что касается прослушивателя событий, вы можете добавить прослушиватель 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...