jQuery 多点击事件检查
jQuery multi click event check
您可以在下方 link github 页访问完整代码。 Link
在 HTML 中,代码如下所示。
<ul class="deck">
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
而 JavaScript 代码是这样的。
$(document).ready(function () {
$('.card').click(function () {
// Card Open
$(this).addClass("open show");
// Save First Click i element className
let firstclick = ($(this).children('.fa'));
console.log(firstclick);
// Save Second Click i element className
let secondclick = ($(this).children('.fa'));
console.log(secondclick);
// compare first click element and second element to match card
if (firstclick === secondclick) {
// if match each other change card class to "card match"
$(this).removeClass("open show");
$(this).addClass("match")
} else {
// if not match each other close card after 2 seconds.
let ele = $(this);
setTimeout(function () {
ele.removeClass("open show");
}, 2000);
}
})
});
如你所见我的评论。当我单击 li 元素时,检查 li 元素内的 i 标记并将其保存到 firstclick 变量中。和secondclick也一样。并相互比较,如果匹配,则将 class 更改为 "card match",但如果不匹配,则 2 秒后应更改 "card" class 以关闭卡片。
但我有一些疑问如何保存第一次点击和第二次点击
在我的 console.log 中,当我单击 li 元素时,它只保存相同的变量。
is it because everytime you click $(this) will select your clicked
element so it does firstclick, secondclick get same value order to avoid this i am using seq controller for logic as you can see below
$(document).ready(function() {
var sequenceController = 1,
firstclick, secondclick;
$('.card').click(function() {
// Card Open
$(this).addClass("open show");
switch (sequenceController) {
case 1:
firstclick = ($(this).children('.fa').attr('class'));
sequenceController++;
break;
case 2:
secondclick = ($(this).children('.fa').attr('class'));
sequenceController--;
if (firstclick == secondclick) {
$('.open.show').removeClass("open show").addClass("match");
alert('matched')
} else {
$('.open.show').removeClass("open show")
firstclick = '1';
secondclick = '2';
alert('not matched')
}
break;
}
})
});
您可以通过向 jQuery 添加一些布尔值来轻松解决此问题。
var isFirstClick = true;
$(document).ready(function () {
$('.card').click(function () {
$(this).addClass("open show");
var firstclick, secondclick;
if ( isFirstClick ) {
firstclick = ($(this).children('.fa'));
console.log(firstclick);
isFirstClick = false;
}
else {
secondclick = ($(this).children('.fa'));
console.log(secondclick);
isFirstClick = true;
}
if (firstclick === secondclick) {
$(this).removeClass("open show");
$(this).addClass("match")
} else {
let ele = $(this);
setTimeout(function () {
ele.removeClass("open show");
}, 2000);
}
})
});
您可以在下方 link github 页访问完整代码。 Link
在 HTML 中,代码如下所示。
<ul class="deck">
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
而 JavaScript 代码是这样的。
$(document).ready(function () {
$('.card').click(function () {
// Card Open
$(this).addClass("open show");
// Save First Click i element className
let firstclick = ($(this).children('.fa'));
console.log(firstclick);
// Save Second Click i element className
let secondclick = ($(this).children('.fa'));
console.log(secondclick);
// compare first click element and second element to match card
if (firstclick === secondclick) {
// if match each other change card class to "card match"
$(this).removeClass("open show");
$(this).addClass("match")
} else {
// if not match each other close card after 2 seconds.
let ele = $(this);
setTimeout(function () {
ele.removeClass("open show");
}, 2000);
}
})
});
如你所见我的评论。当我单击 li 元素时,检查 li 元素内的 i 标记并将其保存到 firstclick 变量中。和secondclick也一样。并相互比较,如果匹配,则将 class 更改为 "card match",但如果不匹配,则 2 秒后应更改 "card" class 以关闭卡片。
但我有一些疑问如何保存第一次点击和第二次点击 在我的 console.log 中,当我单击 li 元素时,它只保存相同的变量。
is it because everytime you click $(this) will select your clicked element so it does firstclick, secondclick get same value order to avoid this i am using seq controller for logic as you can see below
$(document).ready(function() {
var sequenceController = 1,
firstclick, secondclick;
$('.card').click(function() {
// Card Open
$(this).addClass("open show");
switch (sequenceController) {
case 1:
firstclick = ($(this).children('.fa').attr('class'));
sequenceController++;
break;
case 2:
secondclick = ($(this).children('.fa').attr('class'));
sequenceController--;
if (firstclick == secondclick) {
$('.open.show').removeClass("open show").addClass("match");
alert('matched')
} else {
$('.open.show').removeClass("open show")
firstclick = '1';
secondclick = '2';
alert('not matched')
}
break;
}
})
});
您可以通过向 jQuery 添加一些布尔值来轻松解决此问题。
var isFirstClick = true;
$(document).ready(function () {
$('.card').click(function () {
$(this).addClass("open show");
var firstclick, secondclick;
if ( isFirstClick ) {
firstclick = ($(this).children('.fa'));
console.log(firstclick);
isFirstClick = false;
}
else {
secondclick = ($(this).children('.fa'));
console.log(secondclick);
isFirstClick = true;
}
if (firstclick === secondclick) {
$(this).removeClass("open show");
$(this).addClass("match")
} else {
let ele = $(this);
setTimeout(function () {
ele.removeClass("open show");
}, 2000);
}
})
});