对于具有is-inactive类的元素，将光标设置为default [英] Setting cursor to default for elements with is-inactive class
本文介绍了对于具有is-inactive类的元素，将光标设置为default的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
一旦选择了每个类别中的最大数量的玩家（两个守门员，六个守门员，十二个前锋），剩下的玩家 selected 应该被设置为 cursor：default is-inactive
Once the maximum number of players (two goalies, six defensemen, twelve forwards) in each of their categories have been chosen, the remaining players picked with the class is-inactive should been set to cursor:default
所有玩家都有 -inactive 作为默认值，，我想要做的是尝试设置 cursor：default 被挑选，并且他们的班级切换到活动。
All the players have the class is-inactive as a default, and what I'm trying to do is trying to set cursor: default only after other players have been picked and have had their class switched to is-active.
即。两个守门员被挑选，现在有类活动并在悬停时采取 cursor：pointer 行为。这个类别共有10个玩家，其他8个守门员 is-inactive ，应该有 cursor：default 行为。
ie. Two goalies are picked and now have the class of is-active and take the cursor:pointer behaviour on hover. There are a total of ten players in this category, the other eight goalies are is-inactive and should have the cursor: default behaviour.
- 我试图切换css但是即使是
is-inactive的玩家仍然有cursor：pointer/ li>
- I'm trying to switch the css for the cursor back to it's default, but even players with
is-inactivestill have thecursor: pointeron them
.player {
display: inline-block;
margin-top: 15px;
margin-right: 20px;
vertical-align: top;
cursor: pointer;
position: relative;
}
index.html
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
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();
推荐答案
如果您不介意JavaScript解决方案，
If you don't mind a javascript solution, adding a class to the .is-inactive players after the first click of a player will provide a solution.
编辑我有点离开我的第一个例子，因为.is-inactive和.is-active类不适用于.player对象，而是后代，但是下面的代码段提供了正确的实现：
EDIT I was a little off with my first example because the .is-inactive and .is-active classes apply not to the .player objects but to descendants, however the following snippet provides the correct implementation:
第二次编辑在与OP讨论他的期望后，以下实施更适合他的需求。我将.is-active和.is-inactive类移动到.player元素，然后将以下行添加到点击函数：
SECOND EDIT After some discussion with the OP about his expectations, the following implementation better suits his needs. I moved the .is-active and .is-inactive classes to the .player elements and then added the following lines to the click function:
$(".player").filter(".is-active").removeClass("not-picked");
$(".player").filter(".is-inactive").addClass("not-picked");
这个CSS：
.not-picked {
cursor: default;
}
现在每当播放器被点击时，它将选择或取消选择该播放器
So that now whenever a player is clicked, it will select or deselect that player and the cursor will change unless the player-type (i.e. goalie) is full.
/*-------------------------------------
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>
这篇关于对于具有is-inactive类的元素，将光标设置为default的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
