Question

这里我有4个按钮。如何在ajax部分的data: "id="末尾获取每个按钮的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/

如何使用$（this）将ID的值传入Ajax？

4 个答案: