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

Question

将每个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/

Answer 1

要使这适用于单个组，您需要更改选择器，使其与目标.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年了，应该进行更新。