.click（）イベントを切り替えるには、2回クリックする必要があります。

Question

似たような質問がありますが、私にはまだ助けになるものはありませんでした。 .fa-caret-right要素のCSS "トランスフォーム"プロパティを切り替えたいとします。初めてクリックすると機能がうまく動作します。しかし、私はそれを2回目にトリガしようとすると、私は常に2回クリックする必要があります。 JavaScriptとHTMLコードを別々のファイルに分けて、HTMLファイルのheadにリンクしました。

編集：私は#counterを追加し、count++;がfa-caret-rightがクリックされたが、transformのみ他のすべての時間が働いているとき、作業常にであること、が分かりました。

誰かが私が作った間違いを見るかもしれない、ありがとう！ 私はすでに私が知っているいくつかのクリックイベントを試してみましたが、これは現時点では私のコードです：

HTML

<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

移動（13個の#p要素の合計があります） var count = 1 outside（above）$（ 'document'）。ready（）