bugfix> javascript > 投稿

私はすべて異なる色の10個のボタンがあり、ユーザーが2つの異なるボタンをクリックした後、クリックされたボタンの色の組み合わせが作成され、色の組み合わせに基づいてすでに準備された画像で画像フレームを切り替えるjQueryスクリプトを作成したいと思います。

私の質問は、クリックされた2つのボタン(またはリンク)に条件を設定する方法です。

   <a href="" title="Switch" class="menulink">switch me</a>
<img src="http://placehold.it/333/fe3/img/picture2.jpg" id="bg" />
$(function() {
     $('.menulink').click(function(e){
         e.preventDefault();
       $("#bg").attr('src',"http://placehold.it/333/3ef/img/picture1.jpg");
     });
    });

このようなことを実現したいのですが、2つのボタン(またはリンク)をクリックしたときに画像を変更したいです。 http://jsfiddle.net/maniator/Sevdm/

回答 3 件
  • クリックしたときにボタンが一意であることを確認したい場合は、表示されている追跡方法が必要になります。古いブラウザとの互換性のために、ここでSetのようなJSオブジェクトを使用しています。

    var clickCount = 0;//count the clicks
    var clickTracker = {};//track which id's were clicked
    var clickThreshold = 2;//the number of clicks we want before executing the if block
    function clickHandler(){//callback function for the event
      if(clickTracker[this.id] === undefined){//we haven't seen this id yet
        clickCount++;//increment the number of buttons clicked
        clickTracker[this.id] = 1;//flag for tracking the click
        if(clickCount >= clickThreshold){//we saw at least clickThreshold clicks
          console.log(clickCount + 'unique clicks happened!');
          //your work here
        }
      }
    }
    $('.cls').click(clickHandler);//bind events
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button id='btn1' class='cls'>1</button>
    <button id='btn2' class='cls'>2</button>
    <button id='btn3' class='cls'>3</button>
    <button id='btn4' class='cls'>4</button>
    <button id='btn5' class='cls'>5</button>
    
    

  • イベントの委任を使用して、 .menulink のクリックを追跡できます  要素。 e.delegateTarget を使用する  親コンテナに .menulink かどうかを決定する変数を保持させることができます  要素は以前にクリックされており、クリックされた場合、背景を変更することができます。

    これを行うには、 click を切り替えました   on へのメソッド  方法。ザ・ on  メソッドのパラメーターは次のとおりです。

    $(element).on(event, delegated selector, function)

    JQuery .onドキュメント

    委任とは、ボタンにイベントを配置して各ボタンがクリックされたかどうかをチェックするのではなく、ボタンのコンテナーにイベントを配置し、イベントを引き起こした要素が委任されたセレクターと一致するかどうかを確認することを意味します。存在する場合、提供された関数が起動されます。コード内の委任された要素の親にアクセスするには、返されたイベントオブジェクト、この場合は e.delegateTarget を使用できます。  

    JQuery DelegateTargetドキュメント

    JavaScriptのすべてがオブジェクトであるため、ブラウザの最も基本的なアーキテクチャに明示的に含まれていないものに新しいプロパティとメソッドを割り当てることができます。これには絶対に body が含まれます  ページの。

    以下のコードでは、新しいプロパティ clicked を配置します   body で  ページの。これは、最初の .menulink のクリック時に追加されます  要素、および後続の各クリックでチェックされます。

    このため、 body.clicked かどうかを判断することで、2回目のクリックかどうかを知ることができます  本当です。その場合、背景画像を変更するようスクリプトに指示します。

    $(function() {
         $('body').on("click", ".menulink", function(e){
         if(e.delegateTarget.clicked) $("#bg").attr('src',"http://placehold.it/333/3ef/img/picture1.jpg");
         else e.delegateTarget.clicked = true;
         e.preventDefault();
         });
        });
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <a href="" title="Switch" class="menulink">switch me</a>
    <a href="" title="Switch" class="menulink">switch me</a>
    <img src="http://placehold.it/333/fe3/img/picture2.jpg" id="bg" />
    
    

  • これは私が探していたものです

    <script>
    $(document).ready(function() {
      var chosenColors = [];
      $(".colors button").click(function() {
        chosenColors.push($(this).text())
        check();
      });
      function check() {
        if (chosenColors.length === 2) {
          $(".pretty-picture").attr("src", chosenColors.sort().join("-") + ".png")
          chosenColors = [];
        }
      }
    });
    </script>
    <body>
    <div class=colors>
      <button type="button">red</button>
      <button type="button">yellow</button>
      <button type="button">blue</button>
    </div>
    <img class="pretty-picture">
    </body>
    
    

あなたの答え