Question

我使用我的PHP代码使用10 <div>和class='ThisOne' -

<?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;?>"></input>
    <button type="button" id="SelectPostComment-<?php echo $i;?>" data-target="<?php echo $i;?>" >Submit</button>
</div>
<div id="ShowAjaxesult-<?php echo $i;?>" class="Thisone" style="" ></div>
<?php
}
?>

当用户点击<div>并id="ShowAjaxesult-5"时，我希望使用<button>展开id="SelectPostComment-5"。同样，当用户使用<div>点击id="ShowAjaxesult-8"时，使用<button>展开id="SelectPostComment-8"，依此类推。

对于我使用的JS看起来像 -

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

                   $.ajax( {
                      type : 'GET',
                      url:'test1.php',
                      data : {CommentText: CommentText, PostID: PostID},
                      success:function(data) {                               
                       $("[id^=ShowAjaxesult-]").html(data);
                      }
                   });
               });
            });
            </script>

上述代码的问题在于，当我点击任意<button>时，它会显示所有<div>（所有<div> ShowAjaxesult-1和ShowAjaxesult-2和... .. ShowAjaxesult-10）。我想在<div>次点击时显示一个<button>，具体取决于其id选择器的值。例如，在选择<div id='ShowAjaxesult-2'>时显示<button id='SelectPostComment-2'>，依此类推。不知道我犯了什么错误。请帮忙。

Answer 1

更改

                   $("[id^=ShowAjaxesult-]").html(data);

分为：

                   $("#ShowAjaxesult-"+PostID).html(data);

让它适合我。

Answer 2

在按钮和输入中添加一个类，您可以这样做：

<script>
    $(document).ready(function() {
       $(".subBtn").click(function(){
           var $Parent = $(this).parent();
           var CommentText = $Parent.find('.getComment').val();
            var PostID = $Parent.find('.getPost').val();

           $.ajax( {
              type : 'GET',
              url:'test1.php',
              data : {CommentText: CommentText, PostID: PostID},
              success:function(data) {                               
               $Parent.next().html(data);
              }
           });
       });
    });
    </script>

Answer 3

我不熟悉id ^ =语法但你的选择器不够具体。您可以通过按钮的ID获取索引：

var i = $(this).split('-')[1];

然后将它附加到你的ajax结果div：

$("[id=ShowAjaxesult-"+i+"]").html(data);

在旁注上我发现使用＆＃34; $ Parent＆＃34;作为变量名称令人不安。你是简单地在这里混合使用PHP语法还是在前面添加一个美元符号并将第一个字母设为大写是有意义的？

干杯，

杰西

如何在动态创建的id选择器上显示ajax结果？

3 个答案: