必须单击两次才能切换 .click() 事件答案

【问题标题】：Have to click twice to toggle .click() Event必须单击两次才能切换 .click() 事件
【发布时间】：2017-10-28 23:35:11
【问题描述】：

我知道有类似的问题，但还没有可以帮助我的问题。我想切换.fa-caret-right 元素的CSS“转换”属性。当我第一次单击时，该功能运行良好。但是当我第二次尝试触发它时，我总是要点击两次。我已将 JavaScript 和 HTML 代码分离到不同的文件中，并将其链接到 HTML 文件的 head 中。

编辑：我添加了#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)");
    }
 );

});

【问题讨论】：

你可以为这个问题制作一个 jsfiddle 或 codepen 吗？
您正在使用count 进行跟踪。当您单击一次时，count=2 表示 p2，但当您再次单击它时，它变为 3，而 p3 不存在。同样对于它在第三次单击时工作的原因可能是它正在重新加载页面或启动 $("document").ready 函数，这使得 count=1 再次出现。
实际上有 13 个 #p 元素 - 我在这个例子中缩短了代码。如果你是对的，页面被重新加载，它对我来说是不可见的。我也尝试在没有$("document").ready 的情况下编写代码，但没有任何效果。但我在文档中插入了一个计数器并意识到，count 总是增加，而 CSS 操作不起作用。所以该功能部分工作。
您肯定需要$("document").ready，因为它会在加载后执行您的 jquery。否则，如果 jquery 加载缓慢，则不能使用 $。您是否尝试过德里克提到的答案。如果可能，请分享一些有用的小提琴或codepen。尝试使用debugger 来检查不同步骤的变量值。
@Jack in JSFiddle 它在每次点击时都会“滚动”，但一次比另一次多，所以它仍然无法正常工作。 JS Fiddle

标签： javascript jquery html css click

【解决方案1】：

将 var count=1 移到 $('document').ready() 外部（上方）

【讨论】：

好主意，可惜没有解决问题。我刚刚在文档中插入了一个计数器并意识到，count 总是增加而 CSS 操作不起作用。所以该功能正在部分工作......您还有解决方案的想法吗？