jQuery：子要素のOnclick関数の引数に "src"属性を書き込む方法

Question

JSを使用しないHTMLページをJSドライブページに変換するためにjQueryを使用してDOMを書き換えています。私は画像のリンクを変える際に不具合を起こしました。

<div class="f"> 
    <a href="images/Fig-03-2.png" target="_blank"> 
     <img src="images/fig-03-2.png" alt="Fig 3.3" /> 
    </a> 
</div> 

...と私はにそれを変換したい：元のコードでは私が持っている、それはimg srcを含むように私はonclick属性を作成する方法を見つけ出すことはできません

<div class="f"> 
    <a> 
     <img src="images/fig-03-2.png" alt="Fig 3.3" onclick="imagepop("fig-03-2.png")/> 
    </a> 
</div> 

値はimagepopの引数です。私が試した：

$(".f a").attr('onclick', 'imagepop(' + $(this).attr('src') + ')'); 

...しかし$(this).attr('src')は "未定義" 返されました。

コードの行を修正するにはどうすればいいですか、またはimagepop関数内のimg src属性を読み取る方がよいでしょうか？

**私は各divが一意のIDを持つようにページを開発していないので、そうする予定はありません。 <div>タグ内の要素には、IDが割り当てられていません。

Answer 1

...と私はそれが価値がある何のため...

にそれを変換したい、私はないでしょう。代わりには、私はこのような機能を使用したい：ユーザーが画像をクリックすると、それはimagepop事を行い、イベントをキャンセル：おそらくreadyハンドラに包まれたその行は、ある何

$("div.f a img").click(function() { 
    imagepop(this.src); 
    return false; 
}); 

（他のものの中では）リンクが発火するのを防ぎます。

プログレッシブエンハンスと呼ばれています。 JavaScriptを有効にしたユーザーエージェントは上記を使用し、JavaScriptを有効にしていないユーザーエージェントは引き続きリンクを参照します。 user-agentはブラウザだけではなく、クローラ、スパイダーなど、JavaScriptを無効にしたブラウザも含まれます。

---

更新：あなたは本当に、その後、むしろ画像レベルよりも、（多くのキーボードに優しいかもしれません）、リンクレベルでそれを処理する場合：

$("div.f a").click(function() { 
    var img = $(this).find("img"); 
    if (img[0]) { 
     imagepop(img[0].src); 
     return false; 
    } 
}); 

...以来、 imgであり、aではなく、srcの要素です。 （ - おそらくすべてのマイナー - ここattrを使用し、必要はありません、srcは、プロパティは、すべての主要なによってサポートされて反映ブラウザ。）

Answer 2

はこの試してみてください。

$('.f a').onclick(function(e){ 
imagepop($(this).find('img').attr('src')); 
e.preventDefault(); 
}); 

基本的に、それはすべてを選択します.fクラスのアンカーを使用し、それぞれにonclickを適用します。 onclick関数の中で、現在のアンカータグであるthisを参照し、jQueryオブジェクトに挿入します。これにより、そのアンカータグの下にあるすべてのimg要素を見つけて、src属性を引き出し、imagepop()で実行できます。