时间戳

首页 > 解决方案 > 切换元素，如果第一次单击切换该 div 内的所有元素

jquery - 切换元素，如果第一次单击切换该 div 内的所有元素

问题描述

将每个 div 想象成您手中的一张牌，您必须选择要玩的牌。

我无法更改组类名称或元素类名称。

规则：

我的代码有效，但仅适用于一组，不适用于 2-3-4 组...

$('.carta:first').click(function() {
  if ($('.isOut').length < $('.carta').length) {
    $('.carta').addClass('isOut');
  } else {
    $(this).removeClass('isOut');
  }
})

$('.carta:not(:first)').click(function() {
  $(this).toggleClass("isOut");
})
body {
  background: grey;
}

.carta {
  background: blue;
  width: 50%;
  height: 50px;
  margin-left: 0%;
}

.isOut {
  margin-left: 30%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class=gruppo name=team[]>
  <div class="carta">1 first</div><br>
  <div class="carta">1</div><br>
  <div class="carta">1</div>
</div><br>
<hr>
<br>
<div class=gruppo name=team[]>
  <div class="carta">2 first</div><br>
  <div class="carta">2</div><br>
  <div class="carta">2</div><br>
  <div class="carta">2</div><br>
</div>

在这里摆弄：http: //jsfiddle.net/3mejdq4y/

标签： jquerytoggle

解决方案

要使这适用于各个组，您需要更改选择器，使它们与 target 相关.gruppo，而不是与所有.carta和isOut元素相关。为此，请使用closest()获取对父元素的引用，然后find()在其中引用。

另请注意，:first需要更改为:first-child，因为您需要针对每个容器中的第一个元素，而不是第一个整体。

尝试这个：

$('.carta:first-child').click(function() {
  let $container = $(this).closest('.gruppo');
  if ($container.find('.isOut').length < $container.find('.carta').length) {
    $container.find('.carta').addClass('isOut');
  } else {
    $(this).removeClass('isOut');
  }
})

$('.carta:not(:first-child)').click(function() {
  $(this).toggleClass("isOut");
})
body {
  background: grey;
}

.carta {
  background: blue;
  width: 50%;
  height: 50px;
  margin-left: 0%;
}

.isOut {
  margin-left: 30%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gruppo" name="team[]">
  <div class="carta">1 first</div><br>
  <div class="carta">1</div><br>
  <div class="carta">1</div>
</div><br>
<hr>
<br>
<div class="gruppo" name="team[]">
  <div class="carta">2 first</div><br>
  <div class="carta">2</div><br>
  <div class="carta">2</div><br>
  <div class="carta">2</div><br>
</div>

另请注意，您使用的 jQuery 版本 1.11.0 已超过 6 年，应该更新。

推荐阅读