Переключить элемент, если сначала щелкнуть, переключить все элементы внутри этого элемента - PullRequest
Новая
       4

Переключить элемент, если сначала щелкнуть, переключить все элементы внутри этого элемента

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

Представьте, что каждый Div - это карта в вашей руке, и вы должны выбрать, какие из них играть.

Я не могу изменить ни имя класса группы, ни имя класса элемента.

ПРАВИЛА:

  • если элемент щелкнул его, чтобы изменить его положение <- left / right ->
  • , если первый элемент группы щелкнул, все элементы в этой группе идут вправо ->
  • , если все элементы в этой группе уже находятся справа, а первый элемент нажал только первый элемент, он идет влево

мой код работает, но только для одной группы, а не для 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/

1 Ответ

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

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

...