Подтвердить что ты не робот

Установка курсора по умолчанию для элементов с классом is-inactive

Цель

Как только будет выбрано максимальное количество игроков (два вратаря, шесть защитников, двенадцать форвардов) в каждой из своих категорий, оставшиеся игроки picked с классом is-inactive должны быть установлены на cursor:default

Уточнение проблемы

Все игроки имеют класс is-inactive по умолчанию,, и я пытаюсь установить cursor: default только после того, как другие игроки были выбраны и у них был свой класс переключился на is-active.

, т.е.. Две вратаря выбраны и теперь имеют класс is-active и принимают поведение cursor:pointer при наведении. В этой категории всего десять игроков, остальные восемь вратарей is-inactive и должны иметь поведение cursor: default.

Проблема

  • Я пытаюсь переключить css для возврата к нему по умолчанию, но даже у игроков с is-inactive все еще есть cursor: pointer на них

style.css

.player {
  display: inline-block;
  margin-top: 15px;
  margin-right: 20px;
  vertical-align: top;
  cursor: pointer;
  position: relative;
}

index.html

<div class="player player--goalie year--1990">
  <div class="tooltip tooltip--tall">
    <p class="tooltip__name">Brian Elder</p>
    <p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
    <p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
    <div class="tooltip__stats--inline">
      <div class="stats__group stats--games">
        <p class="stats__header">GP</p>
        <p class="stats__number stats__number--games">110</p>
      </div>

      <div class="stats__group stats--goalsag">
        <p class="stats__header">GA</p>
        <p class="stats__number stats__number--goalsag">2.00</p>
        <p class="stats__number">3.12</p>
        <p class="stats__number">3.46</p>
        <p class="stats__number">2.70</p>
      </div>

      <div class="stats__group stats--savep">
        <p class="stats__header">SAV%</p>
        <p class="stats__number stats__number--savep">.909</p>
        <p class="stats__number">.886</p>
        <p class="stats__number">.884</p>
        <p class="stats__number">.906</p>
      </div>

      <div class="stats__group stats--shutouts">
        <p class="stats__header">SO</p>
        <p class="stats__number">0</p>
        <p class="stats__number">0</p>
        <p class="stats__number stats__number--shutouts">3</p>
        <p class="stats__number">2</p>
      </div>
    </div> <!-- tooltip__stats--inline -->
  </div> <!-- tooltip -->
  <div class="player__headshot player--elder">
    <div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i></div>
  </div>
  <p class="player__name">Brian Elder</p>
  <p class="player__position">Goalie</p>
</div>

scripts.js

/*-------------------------------------
COUNT SELECTED
--------------------------------------*/

function countSelected() {
    $(".player").on("click", function(){

        // Checks if the maximum number of players have been selected
        // If so, return false and then do nothing
        // If not, the class will toggle from `is-inactive` to `is-active`
        if ($(this).find(".picked.full").length > 0) return false;
        $(this).find(".picked").toggleClass("is-inactive is-active");

        // Count the number of players with stars
        var starredGoaltenders = $(".player--goalie").find(".picked.is-active").length;
        var starredDefencemen = $(".player--defencemen").find(".picked.is-active").length;
        var starredForwards = $(".player--forward").find(".picked.is-active").length;

        console.log(starredGoaltenders, starredDefencemen, starredForwards);

        // The number of starred players for each position cannot exceed the following numbers
        var maxGoaltenders = 2;
        var maxDefencemen = 6;
        var maxFowards = 12;

        // If the number of starred players hits its max, a class of `is-completed` is adding to the corresponding checkmark to indicate that the task has been completed
        if (starredGoaltenders === maxGoaltenders) {
            $(".checkmark--goalie").addClass("is-completed");
            $(".player--goalie").find(".picked").addClass("full");
        }

        if (starredDefencemen === maxDefencemen) {
            $(".checkmark--defencemen").addClass("is-completed");
            $(".player--defencemen").find(".picked").addClass("full");
        }

        if (starredForwards === maxFowards) {
            $(".checkmark--forward").addClass("is-completed");
            $(".player--forward").find(".picked").addClass("full");
        }

        // If all the conditions are met show the submit vote button
        if (starredGoaltenders === maxGoaltenders && starredDefencemen === maxDefencemen && starredForwards === maxFowards) {
            $(".btn--submit").show();
            $(".btn--submit").addClass("slideLeft");
        }
    });
} countSelected();
4b9b3361

ОТВЕТЫ

Ответ 1

Если вы не против решения javascript, добавив класс к .is-неактивным игрокам после первого щелчка игрока, вы получите решение.

РЕДАКТИРОВАТЬ. Я был немного не в своем первом примере, потому что классы .is-inactive и .is-active применяются не к объектам .player, а к потомкам, однако следующий фрагмент дает правильные реализация:

ВТОРАЯ РЕДАКТИРОВКА После некоторого обсуждения с ОП о его ожиданиях, следующая реализация лучше соответствует его потребностям. Я переместил .is-active и .is-inactive классы в элементы .player, а затем добавил следующие строки в функцию click:

$(".player").filter(".is-active").removeClass("not-picked");
$(".player").filter(".is-inactive").addClass("not-picked");

И это для CSS:

.not-picked {
  cursor: default;
}

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

/*-------------------------------------
COUNT SELECTED
--------------------------------------*/

function countSelected() {
    $(".player").on("click", function(){
        // Checks if the maximum number of players have been selected
        // If not, the class will toggle from `is-inactive` to `is-active`
        if ($(this).hasClass("full")) return false;
        $(this).toggleClass("is-inactive is-active");
        $(".player").filter(".is-active").removeClass("not-picked");
        $(".player").filter(".is-inactive").addClass("not-picked");
        // Count the number of players with stars
        var starredGoaltenders = $(".player--goalie").filter(".is-active").length;
        var starredDefencemen = $(".player--defencemen").filter(".is-active").length;
        var starredForwards = $(".player--forward").filter(".is-active").length;

        console.log(starredGoaltenders, starredDefencemen, starredForwards);

        // The number of starred players for each position cannot exceed the following numbers
        var maxGoaltenders = 2;
        var maxDefencemen = 6;
        var maxFowards = 12;

        // If the number of starred players hits its max, a class of `is-completed` is adding to the corresponding checkmark to indicate that the task has been completed
        if (starredGoaltenders === maxGoaltenders) {
            $(".checkmark--goalie").addClass("is-completed");
            $(".player--goalie").addClass("full");
        }

        if (starredDefencemen === maxDefencemen) {
            $(".checkmark--defencemen").addClass("is-completed");
            $(".player--defencemen").addClass("full");
        }

        if (starredForwards === maxFowards) {
            $(".checkmark--forward").addClass("is-completed");
            $(".player--forward").addClass("full");
        }

        // If all the conditions are met show the submit vote button
        if (starredGoaltenders === maxGoaltenders && starredDefencemen === maxDefencemen && starredForwards === maxFowards) {
            $(".btn--submit").show();
            $(".btn--submit").addClass("slideLeft");
        }
    });
} countSelected();
.player {
  display: inline-block;
  margin-top: 15px;
  margin-right: 20px;
  cursor: pointer;
  vertical-align: top;
  position: relative;
}

.not-picked {
  cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="player player--goalie year--1990 is-inactive">
  <div class="tooltip tooltip--tall">
    <p class="tooltip__name">Brian Elder</p>
    <p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
    <p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
    <div class="tooltip__stats--inline">
      <div class="stats__group stats--games">
        <p class="stats__header">GP</p>
        <p class="stats__number stats__number--games">110</p>
      </div>

      <div class="stats__group stats--goalsag">
        <p class="stats__header">GA</p>
        <p class="stats__number stats__number--goalsag">2.00</p>
        <p class="stats__number">3.12</p>
        <p class="stats__number">3.46</p>
        <p class="stats__number">2.70</p>
      </div>

      <div class="stats__group stats--savep">
        <p class="stats__header">SAV%</p>
        <p class="stats__number stats__number--savep">.909</p>
        <p class="stats__number">.886</p>
        <p class="stats__number">.884</p>
        <p class="stats__number">.906</p>
      </div>

      <div class="stats__group stats--shutouts">
        <p class="stats__header">SO</p>
        <p class="stats__number">0</p>
        <p class="stats__number">0</p>
        <p class="stats__number stats__number--shutouts">3</p>
        <p class="stats__number">2</p>
      </div>
    </div> <!-- tooltip__stats--inline -->
  </div> <!-- tooltip -->
  <div class="player__headshot player--elder">
    <div><i class="fa fa-star" aria-hidden="true"></i></div>
  </div>
  <p class="player__name">Brian Elder</p>
  <p class="player__position">Goalie</p>
</div>

<div class="player player--defencemen year--1990 is-inactive">
  <div class="tooltip tooltip--tall">
    <p class="tooltip__name">Brian Elder</p>
    <p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
    <p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
    <div class="tooltip__stats--inline">
      <div class="stats__group stats--games">
        <p class="stats__header">GP</p>
        <p class="stats__number stats__number--games">110</p>
      </div>

      <div class="stats__group stats--goalsag">
        <p class="stats__header">GA</p>
        <p class="stats__number stats__number--goalsag">2.00</p>
        <p class="stats__number">3.12</p>
        <p class="stats__number">3.46</p>
        <p class="stats__number">2.70</p>
      </div>

      <div class="stats__group stats--savep">
        <p class="stats__header">SAV%</p>
        <p class="stats__number stats__number--savep">.909</p>
        <p class="stats__number">.886</p>
        <p class="stats__number">.884</p>
        <p class="stats__number">.906</p>
      </div>

      <div class="stats__group stats--shutouts">
        <p class="stats__header">SO</p>
        <p class="stats__number">0</p>
        <p class="stats__number">0</p>
        <p class="stats__number stats__number--shutouts">3</p>
        <p class="stats__number">2</p>
      </div>
    </div> <!-- tooltip__stats--inline -->
  </div> <!-- tooltip -->
  <div class="player__headshot player--elder">
    <div><i class="fa fa-star" aria-hidden="true"></i></div>
  </div>
  <p class="player__name">Brian Elder</p>
  <p class="player__position">Goalie</p>
</div>

<div class="player player--goalie year--1990 is-inactive">
  <div class="tooltip tooltip--tall">
    <p class="tooltip__name">Brian Elder</p>
    <p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
    <p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
    <div class="tooltip__stats--inline">
      <div class="stats__group stats--games">
        <p class="stats__header">GP</p>
        <p class="stats__number stats__number--games">110</p>
      </div>

      <div class="stats__group stats--goalsag">
        <p class="stats__header">GA</p>
        <p class="stats__number stats__number--goalsag">2.00</p>
        <p class="stats__number">3.12</p>
        <p class="stats__number">3.46</p>
        <p class="stats__number">2.70</p>
      </div>

      <div class="stats__group stats--savep">
        <p class="stats__header">SAV%</p>
        <p class="stats__number stats__number--savep">.909</p>
        <p class="stats__number">.886</p>
        <p class="stats__number">.884</p>
        <p class="stats__number">.906</p>
      </div>

      <div class="stats__group stats--shutouts">
        <p class="stats__header">SO</p>
        <p class="stats__number">0</p>
        <p class="stats__number">0</p>
        <p class="stats__number stats__number--shutouts">3</p>
        <p class="stats__number">2</p>
      </div>
    </div> <!-- tooltip__stats--inline -->
  </div> <!-- tooltip -->
  <div class="player__headshot player--elder">
    <div><i class="fa fa-star" aria-hidden="true"></i></div>
  </div>
  <p class="player__name">Brian Elder</p>
  <p class="player__position">Goalie</p>
</div>

Ответ 2

Вы можете выбрать элементы с несколькими классами, используя .class1.class2. Попробуйте добавить код ниже в конце вашего CSS.

.player .is-active.picked {
  cursor: pointer;
}

Примечание. Лучше избегать - в именах классов. Вместо is-inactive используйте isInactive или is_inactive.

.player {
  display: inline-block;
  margin-top: 15px;
  margin-right: 20px;
  vertical-align: top;
  cursor: default;
  position: relative;
}
.player.is-inactive {
  cursor: default;
}
<div class="player is-inactive player--goalie year--1990">
  <div class="tooltip tooltip--tall">
    <p class="tooltip__name">Brian Elder</p>
    <p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
    <p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
    <div class="tooltip__stats--inline">
      <div class="stats__group stats--games">
        <p class="stats__header">GP</p>
        <p class="stats__number stats__number--games">110</p>
      </div>

      <div class="stats__group stats--goalsag">
        <p class="stats__header">GA</p>
        <p class="stats__number stats__number--goalsag">2.00</p>
        <p class="stats__number">3.12</p>
        <p class="stats__number">3.46</p>
        <p class="stats__number">2.70</p>
      </div>

      <div class="stats__group stats--savep">
        <p class="stats__header">SAV%</p>
        <p class="stats__number stats__number--savep">.909</p>
        <p class="stats__number">.886</p>
        <p class="stats__number">.884</p>
        <p class="stats__number">.906</p>
      </div>

      <div class="stats__group stats--shutouts">
        <p class="stats__header">SO</p>
        <p class="stats__number">0</p>
        <p class="stats__number">0</p>
        <p class="stats__number stats__number--shutouts">3</p>
        <p class="stats__number">2</p>
      </div>
    </div>
    <!-- tooltip__stats--inline -->
  </div>
  <!-- tooltip -->
  <div class="player__headshot player--elder">
    <div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i>
    </div>
  </div>
  <p class="player__name">Brian Elder</p>
  <p class="player__position">Goalie</p>
</div>

Ответ 3

Вам нужно просто переопределить css для указателя мыши в классе игрока, когда игроки неактивны.

.player .is-inactive{
  cursor: default;
}