-1

我有一个图像列表，我希望用户能够单击图像并使用 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')  
       }      
     });   
}
4

3 回答 3

0

完整版：

$(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')  
  }      
 });   
});
于 2012-12-12T18:21:16.303 回答
0

试试这个：

$('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" />
  1. $('input').attr('blah')：'hello'按预期返回。这里没有惊喜。
  2. $('input').prop('blah'): 返回undefined——因为它正在尝试这样做[HTMLInputElement].blah——并且该 DOM 对象上不存在这样的属性。它仅作为该元素的属性存在于范围内，即[HTMLInputElement].getAttribute('blah')

所以，一个属性在 DOM 中；一个属性位于解析为 DOM 的 HTML 中。所以使用道具！

于 2012-12-12T18:22:27.047 回答
0

快速浏览一下建议更改这些行：

$('#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/

于 2012-12-12T18:23:26.210 回答