jquery - 画像のJquery送信

Question

ユーザーが画像をクリックできるようにする画像のリストがあり、jqueryでデータを送信します。したがって、いくつかの画像が与えられた場合、ユーザーはそれらのいずれかをクリックすると、その人が選択した画像の ID を持つ jquery ランディングページに自動的に送信されます。これは、リストを画像として使用するコードでの私の試みです..

<ul>
<li><img id='1' src='/img1.png'></li>
<li><img id='2' src='/img2.png'></li>
<li><img id='3' src='/img3.png'></li>
</ul>

$(function()
{
     $('#img').click(function()
     {
       var datastring = //either 1,2,3 corresponding to image id
       $.ajax({   
       type: "POST",   
       url: "process.php",   
       data: dataString,   
       success: function() {   
          alert('Image Submitted')  
       }      
     });   
}

score 0 · Accepted Answer

完全版:

$(document).ready(function() {
  $('img').click(function()
  {
   var datastring = $(this).attr('id'); // or simply $(this).id;
   $.ajax({   
   type: "POST",   
   url: "process.php",   
   data: dataString,   
   success: function() {   
      alert('Image Submitted')  
  }      
 });   
});

score 0 · Accepted Answer

これを試して：

$('img').click(function() {
    var datastring = $(this).prop('id');
    $.ajax({
        type: "POST",
        url: "process.php",
        data: dataString,
        success: function() {
            alert('Image Submitted')
        }
    });
});

PSとの違いを確認する最も簡単な方法.attrは.prop、次の例です。

<input blah="hello" />

$('input').attr('blah'): 期待どおりに戻ります'hello'。ここで驚きはありません。
$('input').prop('blah'): 戻りますundefined-- やろうとしているため[HTMLInputElement].blah-- そして、その DOM オブジェクトにはそのようなプロパティは存在しません。その要素の属性としてスコープにのみ存在します。[HTMLInputElement].getAttribute('blah')

つまり、プロパティは DOM にあります。属性は、DOM に解析される HTML にあります。したがって、 prop を使用してください！

score 0 · Accepted Answer

ざっと見てみると、これらの行を変更することが提案されています。

$('#img').click(function()
 {
   var datastring = //either 1,2,3 corresponding to image id

これに：

 $('img').click(function()
 {
   var datastring = $(this).attr('id');

#ID を探していないため、が失われました。そして、ID の取得を追加しました。

この部分については、http://jsfiddle.net/tAH7F/を参照してください。

jquery - 画像のJquery送信

3 に答える 3

Related

Reference