- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
在每个类别中选择了最大数量的球员(两名守门员、六名防守队员、十二名前锋)后,剩余球员 picked
同类is-inactive
应该设置为 cursor:default
所有玩家都有类 is-inactive
默认情况下, 而我要做的是尝试设置 cursor: default
只有在其他玩家被选中并将他们的类(class)切换到is-active
之后.
ie. 两名守门员被选中,现在的级别为 is-active
并采取 cursor:pointer
悬停时的行为。该类别共有十名球员,其他八名守门员是is-inactive
并且应该有 cursor: default
行为。
is-inactive
的玩家也是如此还有cursor: pointer
在他们身上.player {
display: inline-block;
margin-top: 15px;
margin-right: 20px;
vertical-align: top;
cursor: pointer;
position: relative;
}
<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>
/*-------------------------------------
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 解决方案,在第一次点击播放器后向 .is-inactive 播放器添加一个类将提供一个解决方案。
编辑 我的第一个示例有点偏离,因为 .is-inactive 和 .is-active 类不适用于 .player 对象,而是应用于后代,但是以下代码片段提供了正确的实现:
第二次编辑 在与 OP 就他的期望进行了一些讨论之后,以下实现更适合他的需求。我将 .is-active 和 .is-inactive 类移动到 .player 元素,然后将以下行添加到点击功能:
$(".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>
关于javascript - 将游标设置为具有 is-inactive 类的元素的默认值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38823862/
我正在尝试使用游标遍历表: DEClARE @ProjectOID as nvarchar (100) DECLARE @TaskOID as nvarchar (100) DECLARE TaskO
使用 JOprionPane 时,光标出现了一些问题。我将光标设置到 pharent 框架,然后使用这个显示一个对话框: Object[] possibilities = {"ham", "spam"
我想将数据从一个表(原始数据,所有列都是 VARCHAR)复制到另一个表(使用相应的列格式进行格式化)。 为了将数据从 rawdata 表复制到 formatted 表中,我使用游标来识别受影响的行。
我先走了 我 100% 属于集合运算阵营。但是当设置逻辑时会发生什么在整个所需的输入域上进行检索会导致如此大的检索,以至于查询显着减慢,变得缓慢,或者基本上需要无限的时间? 在这种情况下,我将使用可能
为什么我不能这样做?我想从 TABLEA 中搜索大于光标值的最接近的值,对两者执行平均函数并将结果放入 test3 中。我收到错误代码 1054 未知列“Xnearest in 'field list
我希望以下存储例程返回一系列行,但它只返回 1: CREATE PROCEDURE example() BEGIN DECLARE current_id INT;
我有一张代表患者体检的表,它有检查 ID 和患者 ID。 我想逐行浏览表格并获取每个患者 ID 并比较其不同的咨询,看看它是否被视为“new_attack”。我正在处理疟疾疾病,我们认为每个在过去 6
如文档所述here ,我需要声明一个在打开时接受参数的游标。 我的查询类似于: DECLARE cur CURSOR (argName character varying) FOR SELECT *
我正在尝试使用 PostgreSQL 学习基本游标。这是我的脚本: DECLARE cur_employees CURSOR FOR SELECT * FROM employee CLOS
*DELIMITER // create procedure test(OUT l_out INT) begin DECLARE done INT DEFAULT FALSE; declare l_s
来自 psycopg2 文档: When a database query is executed, the Psycopg cursor usually fetches all the record
我正在使用 while 循环遍历游标,然后输出数据库中每个点的经度和纬度值。 出于某种原因,它没有返回光标中的最后一组(或第一个取决于我是否使用 Cursor.MoveToLast)经度和纬度值。 这
不知道有没有人试过全新的PHPStorm 4 , 但我遇到了这个新版本的问题,而我以前的主要版本 (PHPStorm 3) 没有。 基本上,当我单击代码 View 空白处的任意位置时,光标会设置在该位
mysql的存储过程、游标 、事务实例详解 下面是自己曾经编写过的mysql数据库存储过程,留作存档,以后用到的时候拿来参考。 其中,涉及到了存储过程、游标(双层循环)、事务。 【说明】:代码
Mysql的存储过程是从版本5才开始支持的,所以目前一般使用的都可以用到存储过程。今天分享下自己对于Mysql存储过程的认识与了解。 一些简单的调用以及语法规则这里就不在赘述,网上有许多例子。这里
我正在使用 SQL Server,我有一个包含 3 列(时间序列)的表 data ,带日期,hour开始,AwardStatus . 大部分奖励状态是随机生成的。有两种选择,授予或未授予。 但是,业务
就目前情况而言,这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放,visit
Why am getting duplicate records ? pls correct me.Thanks in Advance. declare clazzes_rec clazzes%r
Why am getting duplicate records ? pls correct me.Thanks in Advance. declare clazzes_rec clazzes%r
我需要在数据表中设置一个非唯一标识符。这在组内是连续的,即。对于每个组,ID 应从 1 开始,并以 1 为增量递增,直到该组的最后一行。 下表对此进行了说明。 “新 ID”是我需要填充的列。 Uniq
我是一名优秀的程序员,十分优秀!