必須點擊兩次來切換.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（）