Javascript - あらかじめ作成されたページ上の画像を選択し、クリックすると警告をポップする選択機能を作成

Question

Javascript/Jqueryを使用できます。

このページに移動する方法があります：

http://www.canadiantire.ca/en/dyson.html

はタイル上の唯一の製品の画像を選択するスクリプトを追加しますが、私はそれらをクリックすると、潜在的にその価格でアラートを作成しますしかし、今はただの言い回しだけで満足しています。

私は配列にループする必要があると仮定し、それらの画像にはおそらくaddeventlistenerを使用すると仮定します。各画像に入り、IDを追加することなくこれを行う方法はありますか？

ありがとうございます！すべての製品要素をフェッチ

Answer 1

まず、私は.product-tile-srp__content-wrapper そして、このセレクタを選んだのは、各製品のため、clickイベントを添付して、ここで.product-tile__price

から価格をフェッチコードです：

var products = document.querySelectorAll('.product-tile-srp__content-wrapper'); 

for (var i = 0; i < products.length; i++) { 
    products[i].addEventListener('click', function(event) { 
    var product = this; 
    var price = product.querySelector('.product-tile__price').innerText; 
    window.alert(price); 
    }); 
} 

。なお、 IEでNodeList.forEachがサポートされていないため、forループが重要です。

Answer 2

jQueryでは、これはかなりシンプルですが、クラスに基づいて選択するだけです。クリックがブラウザを製品ページに移動させないようにする必要もあります。次に、価格を含む要素を子孫で検索して価格を得ることができます。私の例では、製品要素全体ではなく画像を選択したばかりなので、最初に祖先（closest）を検索して基本製品要素を取得し、次に価格要素を見つけなければなりませんでした。ここで

ちょうどページの間、ブラウザのコンソールにこれを入力して、あなたは画像をクリックしたときに活性化させる例です。

$('.product-tile-srp__image').on('click', (e) => { 
    // Prevent click from actually opening the product page 
    e.stopPropagation(); 
    e.preventDefault(); 

    price = $(e.target).closest('.product-tile-srp__content-wrapper').find('.product-tile__price').text(); 
    alert(price); 
});