私はすべて異なる色の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/
イベントの委任を使用して、
.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>
関連記事
- JavaScript onclick画像を変更し、カウンターを増やします
- クリックした画像に応じて開いたURLをフラッター
- PythonでSimpleITK画像の向きを変更する方法
- UITableViewCell内の詳細ボタンの画像を変更する
- DataTablesは入力画像の変更をフィルタリングします
- 2つのドロップダウン選択に基づいて画像のsrc属性を変更するにはどうすればよいですか?
- 静的マップ画像のポリラインの色を変更する
- 2つ以上の画像をクリックしたときに画像を変更するにはどうすればよいですか?
- 光沢のあるダッシュボードのヘッダーの同じ行に画像、タイトル、ボタンを設定します
- アコーディオンメニュー:1つがクリックされたときにすべてのボタンが開くのを止める方法は?
クリックしたときにボタンが一意であることを確認したい場合は、表示されている追跡方法が必要になります。古いブラウザとの互換性のために、ここでSetのようなJSオブジェクトを使用しています。