Question

我的PHP代码看起来像这样 -

for ($i=0;$i<=10;$i++) {
    ?>
<div id="">
    <input type="text" id="GetCommentText-<?php echo $i;?>"></input>
    <input type="hidden" id="GetPostID-<?php echo $i;?>" value="<?php echo $i;?>">
    <button type="button" id="SelectPostComment-<?php echo $i;?>" >Submit</Submit>
</div>
<?php
}
?>  
<div id="ShowAjaxesult"></div>

我想使用jquery动态id选择器获取这些<input>元素的数据。我的jQuery看起来像 -

           <script type="text/javascript" language="javascript">
            $(document).ready(function() {
               $("[id^=SelectPostComment-]").click(function(){
                   var $td = $(this).closest('input').next();
                   var CommentText = $td.find("[id^=GetCommentText-]").val();
                    var PostID = $td.find("[id^=GetPostID-]").val();

                   $.ajax( {
                      type : 'GET',
                      url:'test1.php',
                      data : {CommentText: CommentText, PostID: PostID},
                      success:function(data) {

                         $('#ShowAjaxesult').html(data);
                      }
                   });
               });
            });
            </script>

但是当我点击CommentText时，我的PostID文件中的ajax数据test1.php和<button>没有得到价值。不知道我在做什么错。请帮忙。

Answer 1

试试这个：

for ($i=0;$i<=10;$i++) {
?>
    <div id="">
    <input type="text" id="GetCommentText-<?php echo $i;?>" />
    <input type="hidden" id="GetPostID-<?php echo $i;?>" value="<?php echo $i;?>">
    <button type="button" id="SelectPostComment-<?php echo $i;?>" >Submit</button>
    </div>
    <?php
}
?>
<div id="ShowAjaxesult"></div>

和js part：

       <script type="text/javascript" language="javascript">
        $(document).ready(function() {
           $('[id^="SelectPostComment-"]').click(function(){  // changed here
               var $td = $(this).parent();  // changed here
               var CommentText = $td.find('[id^="GetCommentText-"]:first').val();  // changed here
                var PostID = $td.find('[id^="GetPostID-"]:first').val();  // changed here

               $.ajax( {
                  type : 'GET',
                  url:'test1.php',
                  data : {CommentText: CommentText, PostID: PostID},
                  success:function(data) {

                     $('#ShowAjaxesult').html(data);
                  }
               });
           });
        });
        </script>

Answer 2

或者您可以使用更有效的方式（不需要在DOM树中制作垃圾）：

<?php
for ($i=0;$i<=10;$i++) {
    ?>
    <div data-postId="<?php echo $i; ?>">
    <input type="text" name="commentText" value="" />
    <button type="button" class="submit-comment">Submit</button>
    </div>
    <?php
}
?>
<div id="ShowAjaxesult"></div>

和js part：

   <script type="text/javascript" language="javascript">
    $(document).ready(function() {
       $('.submit-comment').click(function(){  
           var $parent = $(this).parent(); 
           var postId = $parent.data('postId');
           var commentText = $parent.find('input[name="commentText"]:first').val();
           $.ajax( {
              type : 'GET',
              url:'test1.php',
              data : {CommentText: commentText, PostID: postId},
              success:function(data) {
                 $('#ShowAjaxesult').html(data);
              }
           });
       });
    });
    </script>

没有使用动态id选择器获取jquery Ajax数据

2 个答案: