必须点击两次来切换.click（）事件

Question

我知道有类似的问题，但没有任何可以帮助我。 我想切换.fa-caret-right元素的CSS“transform”属性。当我第一次点击时，该功能运行良好。但是当我第二次尝试触发它时，我总是需要点击两次。 我已将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)"); 
    } 
); 

}); 

Answer 1

移动var count = 1 outside（above）$（'document'）。ready（）