javascript - 成功后从$ this追加值

我的网站上有多个具有相同输入名称的表单，因此我使用dataString = $(this).parent().serialize();。

该脚本本身可以完美运行，但是我不想在特定输入字段中附加文本。

AJAX：

$(document).ready(function(){
    $('.AnswerPQSubmit').click(function() {
        dataString = $(this).parent().serialize();
        var pqid = $(".pqid").val();
        var answerpq = $(".answerpq").val();
        $.ajax({
          type: 'post',
          url: 'postpqanswer.php',
          data: dataString,
          dataType: 'html',
            success: function(data) {
                $(".comment"+pqid).append('<p>'+answerpq'</p>');
            }
         });
        return false;
    });
});

HTML：

<form method="post">
    <input type="text" name="answerpq" class="answerpq" placeholder="Write your answer" />
    <input type="hidden" name="pqid" class="pqid" value="<?php echo $rowA['pq_id']; ?>" />
    <input type="submit" name="AnswerPQSubmit" class="AnswerPQSubmit" value="Send" />
    <span class="comment<?php echo $rowA['pq_id']; ?>"></span>
</form>

我尝试做的是通过在“评论”末尾添加帖子的ID，为“评论范围”提供一个唯一的类。

所以...我试图将文本从特定的输入追加到commentid。它在某种程度上起作用，但是因为我使用了它：dataString = $(this).parent().serialize();这个var var pqid = $(".pqid").val();只是在文档中找到第一个pgid类，而不是$this形式的那个。

我正在寻找的是这样的：

var pqid = $(this).(".pqid").val();我知道这条线不起作用。但这使您对我正在寻找的东西有了一个想法。我目前迷路了。

最佳答案

实现的问题是$(".pqid").val()总是返回您第一个元素的值。您可以使用.siblings()定位兄弟姐妹元素。

var pqid = $(this).siblings(".pqid").val();
var answerpq= $(this).siblings(".answerpq").val();

但是，我建议您绑定submit事件而不是click。

的HTML

<form class="PQSubmit" method="post">
    <input type="text" name="answerpq" class="answerpq" placeholder="Write your answer" />
    <input type="hidden" name="pqid" class="pqid" value="<?php echo $rowA['pq_id']; ?>" />
    <input type="submit" name="AnswerPQSubmit" class="AnswerPQSubmit" value="Send" />
    <span class="comment comment<?php echo $rowA['pq_id']; ?>"></span>
</form>

脚本

$(document).ready(function(){
    $('.PQSubmit').submit(function(event) {
        event.preventDefault(); //cancel default action
        dataString = $(this).serialize();
        var pqid = $(this).find(".pqid").val();
        var answerpq = $(this).find(".answerpq").val();
        var commentSection = $(this).find(".comment")
        $.ajax({
          type: 'post',
          url: 'postpqanswer.php',
          data: dataString,
          dataType: 'html',
            success: function(data) {
                commentSection.append('<p>'+answerpq'</p>');
            }
         });
        return false;
    });
});