如何使用$（this）将ID的值获取到Ajax中？

Question

在这里，我有4个按钮。 如何获取每个按钮的id值到data: "id="末尾data: "id=" ajax部分中的data: "id=" ？ 简而言之，每个id都是唯一的，因为它使用数字计数器。

例如，如果我单击第三个按钮，则id等于3 ；如果单击第二个按钮，则id等于2 ...依此类推。 使用$("a").attr('id')类的作品，但它将获取第一个<a>标记并坚持该值，无论您按下哪个按钮。 我也尝试了$(this).attr('id')但这也不起作用。

有什么建议么？

 <?php 
    $counter = 0;

        echo '
      <button><a class="test" id="'.++$counter.'">Test</a></button>
      <button><a id="'.++$counter.'">Test</a></button>
      <button><a id="'.++$counter.'">Test</a></button>
      <button><a id="'.++$counter.'">Test</a></button>
    ';

    ?>
      <script id="source" language="javascript" type="text/javascript">

      $("button").click(function () 
      {

        //-------------------------------------------------------------------------------------------
        // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/
        //-------------------------------------------------------------------------------------------
        $.ajax({                                      
          url: 'api.php',                  //the script to call to get data          
          data: "id="+ $("a").attr('id'),                        //you can insert url argumnets here to pass to api.php for example "id=5&parent=6"
          dataType: 'json',                //data format      
          success: function(data)          //on recieve of reply
          {
            var id = data[0];              //get id
            var vname = data[1];           //get name
            //--------------------------------------------------------------------------------------
            // 3) Update html content
            //--------------------------------------------------------------------------------------
            $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname);
          }
        }); 
      }); 
      </script>

Answer 1

如评论中所建议，这应该起作用。

$(this).find('a').attr('id')

但是，如果您不想遍历DOM，则可以将值存储在按钮中。

<button counterid="'.++$counter.'"><a class="test">Test</a></button>
<button counterid="'.++$counter.'"><a>Test</a></button>
<button counterid="'.++$counter.'"><a>Test</a></button>
<button counterid="'.++$counter.'"><a >Test</a></button>

将以上内容用于HTML，然后您的JS将是：

$(this).attr('counterid')

我不知道php，但是想法是一样的。

Answer 2

$("button").click(function () {
  //-------------------------------------------------------------------------------------------
  // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/
  //-------------------------------------------------------------------------------------------
   var id = $(this).find('a').attr('id');
   $.ajax({                                      
     url: 'api.php',                  //the script to call to get data          
     data: "id="+id,                        //you can insert url argumnets here to pass to api.php for example "id=5&parent=6"
     dataType: 'json',                //data format      
     success: function(data) {
       var id = data[0];              //get id
       var vname = data[1];           //get name
       //--------------------------------------------------------------------------------------
      // 3) Update html content
      //--------------------------------------------------------------------------------------
      $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname);
    }
  }); 
}); 

Answer 3

$("a").attr('id')将检索页面上的所有锚标记，并为您提供第一个ID。

在事件处理程序函数的上下文中， this表示单击的按钮元素。

要在单击的按钮内获取定位标记，可以使用jQuery的.find方法：

$(this).find('a').attr('id');

这将找到所有子锚标签并返回第一个的id属性。

Answer 4

 $("button").click(function (e) {

   var id = $(e.target).attr('id');

    $.ajax{ 
        //...make the ajax call as needed
    });
});

e是事件，e.target是触发单击的按钮元素，然后可以直接获取其ID。

例如http://jsfiddle.net/ZRA9K/

请参阅http://api.jquery.com/click/