Muss zweimal klicken, um zwischen .click() Event

Question

zu wechseln Ich weiß, dass es ähnliche Fragen gibt, aber es gab keine, die mir noch helfen könnten. Ich möchte die CSS "Transform" -Eigenschaft für das .fa-caret-right Element umschalten. Wenn ich das erste Mal klicke, funktioniert die Funktion gut. Aber wenn ich versuche, es zum zweiten Mal auszulösen, muss ich immer zweimal klicken. Ich habe den JavaScript- und HTML-Code in verschiedenen Dateien getrennt und in der head der HTML-Datei verknüpft.

bearbeitet: habe ich #counter und fand heraus, dass count++;immer arbeiten, wenn fa-caret-right geklickt wird aber transform nur jede andere Zeit arbeiten.

Vielleicht sieht jemand einen Fehler, den ich gemacht habe, danke! Ich habe bereits versucht mehrere Click-Ereignisse Ich weiß, aber das ist mein Code im Moment:

HTML (es gibt insgesamt 13 #p Elemente)

<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

verschieben var count = 1 outside (oben) $ ('document'). ready()