如何使用$（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/