时间戳

首页 > 解决方案 > jQuery 获取 .active 元素的索引，但参考其原始兄弟元素

javascript - jQuery 获取 .active 元素的索引，但参考其原始兄弟元素

问题描述

我active在网格中将一个类切换到 jquery 中的一个对象，如下所示：

$(".cinema-seats .seat").on("click", function () {
    $(this).toggleClass("active");
}

基本上，如果我有一个 3x3 的盒子网格，并随机点击 2 个盒子，它们将被分配活动类。现在，我想获取活动框的索引，但相对于原始的 3x3 网格。

例如，

   box 1(active)       box2             box3
   box 4               box5(active)     box6
   box 4               box5             box6

现在，作为输出，我期望得到 1,5，因为它们是相对于框的活动类的索引。

这是一个小例子，我想用一个 7x14 的网格来做这个，排列成列和行，并且只有一个类 =>“.seats”。同样，我想获取活动框相对于所有座位的索引（第 n 个孩子）。

Codepen - https://codepen.io/divi7/pen/zYvbbVN

标签： javascripthtmljquerycss

解决方案

你可以这样做：

$(".cinema-seats .seat").on("click", function() {
  $(this).toggleClass("active");
  let active = $(".cinema-seats .seat.active");
  active.each(function() {
    console.log($(this).index() + 1);
  });
});
.seat {
  float:left;padding:10px;
}
.seat:nth-of-type(3n + 1) {
  clear:left;
}
.active {
  color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cinema-seats">
  <div class="seat">
    box 1
  </div>
  <div class="seat">
    box 2
  </div>
  <div class="seat">
    box 3
  </div>
  <div class="seat">
    box 4
  </div>
  <div class="seat">
    box 5
  </div>
  <div class="seat">
    box 6
  </div>
  <div class="seat">
    box 7
  </div>
  <div class="seat">
    box 8
  </div>
  <div class="seat">
    box 9
  </div>
</div>

如果您只想将所有活动座位的数组作为控制台输出：

 $(".cinema-seats .seat").on("click", function() {
    let seats = [];
    $(this).toggleClass("active");
    let active = $(".cinema-seats .seat.active");
    active.each(function() {
      seats.push($(this).index() + 1);
      console.log(seats);
    });
 });

更新：由于此答案中的标记与问题后面共享的真实标记有很大不同，因此这里是调整后的代码以使用共享标记。

      $(".cinema-seats .seat").on("click", function () {
        $(this).toggleClass("active");
        let seats = [];
        let active = $(".seat.active");
           active.each(function() {
           let seatsPerRow = $(this).parent().find(".seat").length;   
           if(!$(this).closest(".cinema-seats").hasClass("right")) {
              let prevRows = $(this).parent(".cinema-row").prevAll(".cinema-row").length - 1;
              seats.push($(this).index() + (seatsPerRow * prevRows) );             
              console.log(seats);
           }
           else {
              let leftSeats = $(".left").find(".seat").length;
              let prevRows = $(this).parent(".cinema-row").prevAll(".cinema-row").length;
              seats.push($(this).index() + leftSeats + (seatsPerRow * prevRows));
              console.log(seats);
           }
  });
        var bookedSeats = document.querySelectorAll(".active").length;
        var yahan = document.querySelector(".booked");
        yahan.innerHTML = bookedSeats + "Booked";
      });
body {
  margin: 60px;
  background: #111;
}

.theatre {
  display: flex;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cinema-seats {
  display: flex;
}

.cinema-seats .seat {
  cursor: pointer;
}

.cinema-seats .seat:hover:before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: #edffc7;
  border-radius: 7px;
}

.cinema-seats .seat.active:before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: #7cb715;
  border-radius: 7px;
}

.left .cinema-row {
  transform: skew(-15deg);
  margin: 0 10px;
}

.left .seat {
  width: 35px;
  height: 50px;
  border-radius: 7px;
  background: linear-gradient(
    to top,
    #761818,
    #761818,
    #761818,
    #761818,
    #761818,
    #b54041,
    #f3686a
  );
  margin-bottom: 10px;
  transform: skew(20deg);
  margin-top: -32px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.left .row-2 {
  transform: skew(-13deg);
}

.left .row-2 .seat {
  transform: skew(18deg);
}

.left .row-3 {
  transform: skew(-12deg);
}

.left .row-3 .seat {
  transform: skew(16deg);
}

.left .row-4 {
  transform: skew(-11deg);
}

.left .row-4 .seat {
  transform: skew(15deg);
}

.left .row-5 {
  transform: skew(-10deg);
}

.left .row-5 .seat {
  transform: skew(12deg);
}

.left .row-6 {
  transform: skew(-9deg);
}

.left .row-6 .seat {
  transform: skew(10deg);
}

.left .row-7 {
  transform: skew(-7deg);
}

.left .row-7 .seat {
  transform: skew(8deg);
}

.right {
  margin-left: 70px;
}

.right .cinema-row {
  transform: skew(7deg);
  margin: 0 10px;
}

.right .seat {
  width: 35px;
  height: 50px;
  border-radius: 7px;
  background: linear-gradient(
    to top,
    #761818,
    #761818,
    #761818,
    #761818,
    #761818,
    #b54041,
    #f3686a
  );
  margin-bottom: 10px;
  transform: skew(-8deg);
  margin-top: -32px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.right .row-2 {
  transform: skew(9deg);
}

.right .row-2 .seat {
  transform: skew(-10deg);
}

.right .row-3 {
  transform: skew(10deg);
}

.right .row-3 .seat {
  transform: skew(-12deg);
}

.right .row-4 {
  transform: skew(11deg);
}

.right .row-4 .seat {
  transform: skew(-15deg);
}

.right .row-5 {
  transform: skew(12deg);
}

.right .row-5 .seat {
  transform: skew(-16deg);
}

.right .row-6 {
  transform: skew(13deg);
}

.right .row-6 .seat {
  transform: skew(-18deg);
}

.right .row-7 {
  transform: skew(15deg);
}

.right .row-7 .seat {
  transform: skew(-20deg);
}
.booked {
  color: white;
}
.rows {
  color: white;
  margin-top: -160%;
}
.columns {
  color: white;
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="theatre">
      <div class="cinema-seats left">
        <div class="cinema-row row-1">
          <h1 class="rows"></h1>
          <div class="columns">A</div>
          <div class="columns">B</div>
          <div class="columns">C</div>
          <div class="columns">D</div>
          <div class="columns">E</div>
          <div class="columns">F</div>
          <div class="columns">G</div>
        </div>
        <div class="cinema-row row-1">
          <h1 class="rows">1</h1>
          <div class="seat A1"></div>
          <div class="seat B1"></div>
          <div class="seat C1"></div>
          <div class="seat D1"></div>
          <div class="seat E1"></div>
          <div class="seat F1"></div>
          <div class="seat G1"></div>
        </div>

        <div class="cinema-row row-2">
          <h1 class="rows">2</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-3">
          <h1 class="rows">3</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-4">
          <h1 class="rows">4</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-5">
          <h1 class="rows">5</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-6">
          <h1 class="rows">6</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-7">
          <h1 class="rows">7</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>
      </div>

      <div class="cinema-seats right">
        <div class="cinema-row row-1">
          <h1 class="rows">8</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-2">
          <h1 class="rows">9</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-3">
          <h1 class="rows">10</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-4">
          <h1 class="rows">11</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-5">
          <h1 class="rows">12</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-6">
          <h1 class="rows">13</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>

        <div class="cinema-row row-7">
          <h1 class="rows">14</h1>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>
      </div>
    </div>
    <div>
      <h1 class="booked"></h1>

推荐阅读