altを例にした画像をクリックしてください。

Question

divクラスにラップされた画像があります。これらの画像の 'alt'属性は異なります。

「alt」が「Example」の画像をクリックすると、そのURLが「www.google.com」のウェブページに移動します。

alt属性を使用してクリックイベントにバインドしてこのロジックを実装する方法はありますか。

JQueryやJavascriptを使用することは可能ですか？

ここは私のコードですが、動作しません。このコードを修正するにはどうしたらいいですか？

あなたが行うことができます

$('img[alt="Example"]').on("click", "img", function (e) { 
     e.preventDefault(); 
     document.location = 'www.google.com'; 
    }); 

Answer 1

$('img[alt="Example"]').click(function (e) { 
     document.location = 'http://www.google.com'; 
    }); 

Answer 2

： -

$('img[alt="Example"]').on("click", function (e) { 
    e.preventDefault(); 
    document.location = 'www.google.com'; 
}); 

例： -

$('img[alt="Example"]').on("click", function (e) { 
 
    e.preventDefault(); 
 
    document.location = 'www.google.com'; 
 
});

img{ 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img alt="Example" src="https://png.icons8.com/ios/50/007AFF/billie-holiday-filled"> 
 
<br><br> 
 
<img alt="MyExample" src="https://a.deviantart.net/avatars/c/r/crussong.png?15">

た場合、または動的に作成されたイメージ： -

$(document).on("click", 'img[alt="Example"]', function (e) { 
    e.preventDefault(); 
    document.location = 'www.google.com'; 
}); 

例： -

$(document).ready(function(){ 
 
    $('div').html('<img alt="Example" src="https://png.icons8.com/ios/50/007AFF/billie-holiday-filled"><br><br><img alt="MyExample" src="https://a.deviantart.net/avatars/c/r/crussong.png?15">'); 
 
}); 
 
$(document).on("click", 'img[alt="Example"]', function (e) { 
 
    e.preventDefault(); 
 
    document.location = 'www.google.com'; 
 
});

img{ 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div>

Answer 3

あなたは不必要なイベントの委任を持っている、あなたは、URLにhttps://を追加し、また、.on(内"img"を除去することによって、それを削除することができます：jQueryのまたはJavaScript [の

$('img[alt="Example"]').on("click", function (e) { 
 
    e.preventDefault(); 
 
    document.location = 'https://www.google.com'; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img alt="Example" src="http://placeskull.com/300/300">