必须点击两次来切换.click()事件
问题描述:
我知道有类似的问题,但没有任何可以帮助我。 我想切换.fa-caret-right
元素的CSS“transform”属性。当我第一次点击时,该功能运行良好。但是当我第二次尝试触发它时,我总是需要点击两次。 我已将JavaScript和HTML代码分开放在不同的文件中,并将其链接到HTML文件的head
中。必须点击两次来切换.click()事件
编辑:我添加#counter
才知,那是count++;
总是被点击时fa-caret-right
但transform
只工作每个其他时间工作。
也许有人看到我犯的一个错误,谢谢! 我已经尝试了几种点击事件,我知道,但这是我的时刻代码:
HTML(总共有13种#p
元素)
<section class="viewport">
<div class="content">
<div class="controls">
<i class="fa fa-caret-right" aria-hidden="true"></i>
</div>
<p id="counter">1 of 13</p>
<div class="gallery large">
<img src="files/img/ogimage.jpg" id="p1">
<img src="files/img/ogimage2.jpg" id="p2">
<img src="files/img/ogimage3.jpg" id="p3">
<img src="files/img/ogimage4.jpg" id="p4">
</div>
</div>
</section>
的JavaScript
//JavaScript Document
$('document').ready(function() {
var count = 1;
var total = 13;
$('.fa-caret-right').on('click' ,function scrollHorizontal() {
count++;
var number = count + " of 13";
var scrollTo = $("#p"+count);
var where = $(scrollTo).offset().left - 150;
$('#counter').html(number);
$(".gallery").stop().css("transform","translateX(-"+where+"px)");
}
);
});
答
移动var count = 1 outside(above)$('document')。ready()
+0
好主意,但不幸的是没有解决问题。 我刚刚在文档中插入了一个计数器,并意识到'count'总是增加,而CSS-操作不起作用。所以这个功能是部分工作的......你还有解决方案的想法吗? –
你可以为这个问题制作一个jsfiddle或codepen吗? –
您正在使用'''count'''进行跟踪。当你点击一次,'''count = 2'''这意味着'''p2''',但是当你再次点击时它变成了3,'''p3'''不在那里。对于第三次点击工作,原因可能是它正在重新加载页面或启动$(“document”)。ready'''函数,它会再次产生count = 1。 – chowmean
实际上有13个'#p'元素 - 我缩短了这个例子中的代码。 如果你是对的,该页面被重新加载,它是不可见的。我也尝试编写没有'$(“document”)。ready'的代码,但没有任何效果。 但我在文档中插入了一个计数器,并意识到'count'总是增加而CSS-操作不起作用。所以该功能部分工作。 –