Javascript 我必须单击两次才能启动jqueryclick函数

这是你的电话号码。我有个问题；这几乎是随机的。每当我单击一个div来触发一个动画时，我必须单击两次才能触发动画。还有一点需要注意的是，在小提琴中，动画由于某些原因无法正常工作，因此只需假设需要单击两次即可为每个div设置动画；这是我不想要的

HTML

CSS

---

您的代码要求您单击两次，因为在第一次单击时，您的clicks数据尚未设置，所以if语句的else子句首先发生

//"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');
}

您可以设置data-*属性，也可以使用.data进行设置

$("#three").data('clicks',true);
$("#two").data('clicks',true);
$("#one").data('clicks',true);

或

---

问题是当第一次单击元素时，“数据单击”属性的值未定义。您可以通过添加data clicks=true在HTML中设置该值，也可以在Javascript中将该值设置为

$('#one, #two, #three').data('clicks', true);

我还优化了您的代码，使其干燥

$document.readyfunction{ //为单击的元素以外的其他元素设置动画 函数动画疗法，其他元素{ 其他元素。动画{ 边缘左侧：0+‘px’ }，100，'线性'； 单击eElement.animate{ marginLeft:$window.width-900+'px' }，745，‘线性’； } //为单击的元素设置动画的步骤 函数animateclicks，first，otherElements{ var leftMargin=$window.width-900+'px'； 左变量='0px'， 持续时间=800； 如果点击{ //更新marginLeft和duration以设置动画 左=左边距； 持续时间=745； } //为单击的元素设置动画 首先，制作动画{ 左边：左边 }，持续时间，“线性”； //对于其他元素 其他元素。foreachfunction v{ 如果$+v.css'marginLeft'==leftMargin{ 动画其他人第一次，$+v； } }; //通过求反更新数据值 第一，数据点击，！点击； } //所有元素的数组 变量元素=['1'，'2'，'3']； //数组元素上的绑定单击事件 $+元素。连接“，”。单击“键”，函数{ var clicks=$this.data'clicks'； var clickedElement=$this.attr'id'， otherElements=elements.slice； otherElements.StripeElements.IndexOfclickeElement，1； //otherElements是除单击的元素以外的元素的数组 动画图标，$this，otherElements； }; }; 页脚{ 保证金：0； 填充：0； 浮动：左； 宽度：100%； 高度：115px； 背景色：4a4a4a； 溢出：可见！重要； -webkit用户选择：无； /*铬/狩猎*/ -moz用户选择：无； /*火狐*/ -ms用户选择：无； /*IE10+*/ /*以下规则尚未在浏览器中实现*/ -o-用户选择：无； 用户选择：无； } 一个{ 保证金：0； 填充：0； 浮动：左； 宽度：200px； 背景颜色：粉红色； 高度：115px； 左边距：0px； 显示：块； } 一 二 三{ 文本对齐：居中； 颜色：白色； 字体系列：Raleway、Arial、Helvetica、Trebuchet MS、Tahoma、无衬线； 字体大小：粗体； 字体大小：16px； 线高：115px； } 一：悬停{ 背景：黑色； 保证金：0； 填充：0； 高度：115px； 浮动：左； 过渡：所有0.3秒放松； 光标：指针； } 二：悬停{ 背景：黑色； 保证金：0； 填充：0； 高度：115px； 浮动：左； 过渡：所有0.3秒放松； 光标：指针； } 三：悬停{ 背景：黑色； 保证金：0； 填充：0； 高度：115px； 浮动：左； 过渡：所有0.3秒放松； 光标：指针； } 两个{ 保证金：0； 填充：0； 浮动：左； 宽度：200px； 背景颜色：灰色； 高度：115px； 左边距：0px； 显示：块； } 三{ 保证金：0； 填充：0； 浮动：左； 宽度：200px； 背景色：黑色； 高度：115px； 左边距：0px； 显示：块； }

---

注意，你的提琴不起作用，因为你没有告诉它包含jquery：当看到你的代码时，我的眼睛很痛。在这种情况下，它将是未定义的，否则代码的一部分应该执行，对吗？是的，其他部分第一次执行，如果你想先执行真正的部分，然后设置数据，我不喜欢问题中的代码，所以写我自己的版本

//"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');
}

$("#three").data('clicks',true);
$("#two").data('clicks',true);
$("#one").data('clicks',true);

<three id="three" data-clicks="1">

$('#one, #two, #three').data('clicks', true);