我必须点击两次才能获取JQuery点击功能 [英] I have to click twice to get JQuery click function to fire
本文介绍了我必须点击两次才能获取JQuery点击功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是小提琴。我有个问题;它似乎几乎是随机的。每当我点击一个div来触发一个动画，我必须点击两次以获得动画。有一点需要注意的是，在小提琴中，动画由于某种原因不起作用，所以假设每个div都需要两次点击动画;这是我不想要的。
HTML
< footer>
< one id =one>
< p unselectable =on>< / p>
< / 1>
< two id =two>
< p unselectable =on>< / p>
< / 2>
< three-info>
< / three-info>
< three id =three>
< p unselectable =on>< / p>
< / 3>
< / footer>
JavaScript
<$点击（函数（）{
var clicks = $（this）.data（'clicks' ）;
if（clicks）{
$（＃three）。animate（{
marginLeft：$（window）.width（） - 900 +'px'
800），animate（{
marginLeft：0 +'px'
}，745，'linear'）;
} else {
$（＃three 'linear'）;
}
$（this）.data（clicks，！clicks）;
if（$（＃two）。css（marginLeft）= = $（window）.width（） - 900 +'px'）{
$（＃two）。animate（{
marginLeft：0 +'px'
}，100 ，'线性'）;
$（＃three）。animate（{
marginLeft：$（window）.width（） - 900 +'px'
}，745，'线性'）;
}
if（$（＃one）。css（marginLeft） == $（window）.width（） - 900 +'px'）{
$（＃one）。animate（{
marginLeft：0 +'px'
}， 100，'线性'）;
$（＃three）。animate（{
marginLeft：$（window）.width（） - 900 +'px'
}，745，'linear'）;
}
}）; （点击）
$（'＃two'）。click（function（）{
var clicks = $（this）.data（'clicks'）;
$（＃two）。animate（{
marginLeft：$（window）.width（） - 900 +'px'
}，745，'linear'）;
} else （
$ b $，＃2）。 （this）.data（clicks，！clicks）;
if（$（＃three）。css（marginLeft）== $（window）.width（） - 900 +'px' ）{
$（＃three）。animate（{
marginLeft：0 +'px'
}，100，'linear'）;
$（＃two ）.animate（{
marginLeft：$（window）.width（） - 900 +'px'
}，745，'linear'）;
}
if（ $（＃one）。css（marginLeft）== $（window）.width（） - 900 +'px'）{
$（＃one）。animate（{
marginLe ft：0 +'px'
}，100，'linear'）;
$（＃two）。animate（{
marginLeft：$（window）.width（） - 900 +'px'
}，745，'linear'）;
}
}）;点击（function）（）{
var clicks = $（this）.data（'clicks'）;
如果（点击）{
$（＃one）。animate（{
marginLeft：$（window）.width（） - 900 +'px'
}，745，'linear'）;
} else {
$（＃one）。animate（{
marginLeft：0 +'px'
}，700，'linear'）;
}
$ （this）.data（clicks，！clicks）;
if（$（＃two）。css（marginLeft）== $（window）.width（） - 900 +'px' ）{
$（＃two）。animate（{
marginLeft：0 +'px'
}，100，'linear'）;
$（＃one ）.animate（{
marginLeft：$（window）.width（） - 900 +'px'
}，745，'linear'）;
}
if（ $（＃three）。css（marginLeft）== $（window）.width（） - 900 +'px'）{
$（＃three）。animate（{
marginLe ft：0 +'px'
}，100，'linear'）;
$（＃one）。animate（{
marginLeft：$（window）.width（） - 900 +'px'
}，745，'linear'）;
}
}）;
}）;
CSS
footer {
margin：0;
padding：0;
float：left;
宽度：100％;
height：115px;
背景颜色：＃4a4a4a;
溢出：可见！重要;
-webkit-user-select：none; / * Chrome / Safari * /
-moz-user-select：none; / * Firefox * /
-ms-user-select：none; / * IE10 + * /
/ *以下规则尚未在浏览器中实现* /
-o-user-select：none;
user-select：none;
}
one {
margin：0;
padding：0;
float：left;
width：200px;
background-color：pink;
height：115px;
margin-left：0px;
display：block;
}
一，二，三{
text-align：center;
颜色：白色;
font-family：Raleway，Arial，Helvetica，Trebuchet MS，Tahoma，sans-serif;
font-weight：bold;
font-size：16px;
line-height：115px;
}
one：hover {
background：black;
保证金：0;
padding：0;
height：115px;
float：left;
过渡：所有0.3s缓解;
光标：指针;
}
two：hover {
background：black;
保证金：0;
padding：0;
height：115px;
float：left;
过渡：所有0.3s缓解;
光标：指针;
}
three：hover {
background：black;
保证金：0;
padding：0;
height：115px;
float：left;
过渡：所有0.3s缓解;
光标：指针;
}
two {
margin：0;
padding：0;
float：left;
width：200px;
background-color：gray;
height：115px;
margin-left：0px;
display：block;
}
three {
margin：0;
padding：0;
float：left;
width：200px;
背景颜色：黑色;
height：115px;
margin-left：0px;
display：block;
解决方案
您的代码需要点击两次因为第一次点击您的点击数据尚未设置，因此您的if语句中的 else 子句发生第一次
//clicks将首次通过
var clicks = $（this）.data （ '点击'）;
if（clicks）{
$（＃two）。animate（{marginLeft：$（window）.width（） - 900 +'px'}，745，'linear'）;
} else {
//所以这部分首先被执行
$（＃two）。animate（{marginLeft：0 +'px'}，700，'linear'）;
}
您可以设置data- *属性或使用.data（）设置它
$（＃three）。data（'clicks'，true）;
$（＃two）。data（'clicks'，true）;
$（＃one）。data（'clicks'，true）;
或
< three id =threedata-clicks =1>
Here is the Fiddle. I have a problem; it seems almost random. Whenever I click a div to trigger an animation, I have to click twice to get the animation to fire. A little side note, in the fiddle, the animation isn't functional for some reason, so just assume it takes two clicks to animate each div; which is what I don't want.
HTML
<footer>
<one id="one">
<p unselectable="on"></p>
</one>
<two id="two">
<p unselectable="on"></p>
</two>
<three-info>
</three-info>
<three id="three">
<p unselectable="on"></p>
</three>
</footer>
JavaScript
$(document).ready(function () {
$('#three').click(function () {
var clicks = $(this).data('clicks');
if (clicks) {
$("#three").animate({
marginLeft: $(window).width() - 900 + 'px'
}, 745, 'linear');
} else {
$("#three").animate({
marginLeft: 0 + 'px'
}, 800, 'linear');
}
$(this).data("clicks", !clicks);
if ($("#two").css("marginLeft") == $(window).width() - 900 + 'px') {
$("#two").animate({
marginLeft: 0 + 'px'
}, 100, 'linear');
$("#three").animate({
marginLeft: $(window).width() - 900 + 'px'
}, 745, 'linear');
}
if ($("#one").css("marginLeft") == $(window).width() - 900 + 'px') {
$("#one").animate({
marginLeft: 0 + 'px'
}, 100, 'linear');
$("#three").animate({
marginLeft: $(window).width() - 900 + 'px'
}, 745, 'linear');
}
});
$('#two').click(function () {
var clicks = $(this).data('clicks');
if (clicks) {
$("#two").animate({
marginLeft: $(window).width() - 900 + 'px'
}, 745, 'linear');
} else {
$("#two").animate({
marginLeft: 0 + 'px'
}, 700, 'linear');
}
$(this).data("clicks", !clicks);
if ($("#three").css("marginLeft") == $(window).width() - 900 + 'px') {
$("#three").animate({
marginLeft: 0 + 'px'
}, 100, 'linear');
$("#two").animate({
marginLeft: $(window).width() - 900 + 'px'
}, 745, 'linear');
}
if ($("#one").css("marginLeft") == $(window).width() - 900 + 'px') {
$("#one").animate({
marginLeft: 0 + 'px'
}, 100, 'linear');
$("#two").animate({
marginLeft: $(window).width() - 900 + 'px'
}, 745, 'linear');
}
});
$('#one').click(function () {
var clicks = $(this).data('clicks');
if (clicks) {
$("#one").animate({
marginLeft: $(window).width() - 900 + 'px'
}, 745, 'linear');
} else {
$("#one").animate({
marginLeft: 0 + 'px'
}, 700, 'linear');
}
$(this).data("clicks", !clicks);
if ($("#two").css("marginLeft") == $(window).width() - 900 + 'px') {
$("#two").animate({
marginLeft: 0 + 'px'
}, 100, 'linear');
$("#one").animate({
marginLeft: $(window).width() - 900 + 'px'
}, 745, 'linear');
}
if ($("#three").css("marginLeft") == $(window).width() - 900 + 'px') {
$("#three").animate({
marginLeft: 0 + 'px'
}, 100, 'linear');
$("#one").animate({
marginLeft: $(window).width() - 900 + 'px'
}, 745, 'linear');
}
});
});
CSS
footer {
margin: 0;
padding: 0;
float: left;
width: 100%;
height: 115px;
background-color: #4a4a4a;
overflow: visible !important;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
}
one {
margin: 0;
padding: 0;
float: left;
width: 200px;
background-color: pink;
height: 115px;
margin-left: 0px;
display: block;
}
one,two,three {
text-align: center;
color: white;
font-family: "Raleway", Arial, Helvetica, Trebuchet MS, Tahoma, sans-serif;
font-weight: bold;
font-size: 16px;
line-height: 115px;
}
one:hover {
background: black;
margin: 0;
padding: 0;
height: 115px;
float: left;
transition: all 0.3s ease-out;
cursor: pointer;
}
two:hover {
background: black;
margin: 0;
padding: 0;
height: 115px;
float: left;
transition: all 0.3s ease-out;
cursor: pointer;
}
three:hover {
background: black;
margin: 0;
padding: 0;
height: 115px;
float: left;
transition: all 0.3s ease-out;
cursor: pointer;
}
two {
margin: 0;
padding: 0;
float: left;
width: 200px;
background-color: gray;
height: 115px;
margin-left: 0px;
display: block;
}
three {
margin: 0;
padding: 0;
float: left;
width: 200px;
background-color: black;
height: 115px;
margin-left: 0px;
display: block;
}
解决方案
Your code requires you to click twice because on the first click your clicks data hasn't been set yet so your else clause of your if statement happens first
//"clicks" will be undefined the first time through
var clicks = $(this).data('clicks');
if (clicks) {
$("#two").animate({marginLeft: $(window).width()-900 +'px'}, 745, 'linear');
} else {
//so this part gets executed first
$("#two").animate({marginLeft: 0 +'px'}, 700, 'linear');
}
You can either set a data-* attribute or use .data() to set it
$("#three").data('clicks',true);
$("#two").data('clicks',true);
$("#one").data('clicks',true);
Or
<three id="three" data-clicks="1">
这篇关于我必须点击两次才能获取JQuery点击功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
