2つのボタンがクリックされたときに画像を変更するにはどうすればよいですか？

bugfix> javascript > 投稿 2020-08-22 20:15

私はすべて異なる色の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/

javascript

jquery

回答 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>

bugfix

2つのボタンがクリックされたときに画像を変更するにはどうすればよいですか？

javascript

jquery

関連記事