javascript - 我可以针对特定表单使用 jquery 进行评论吗

Question

我在网页上创建了一个新闻系统，在其中使用 while 循环在页面上回显我的新闻。对于新闻，我创建了一个新闻表单，我通过名称来定位它，并且我想使用 jquery 来处理结果。当我使用 php 时，它工作正常，但我想避免通过提交表单和立即向页面发表评论来重新加载页面。

我的表单如下所示:

<form action="" method="post" enctype="multipart/form-data" class="comments" id="comments">
    <textarea id="comment_area" class="comment-area" name="comment" placeholder="Dodajte svoj komentar tukaj..."></textarea>
    <input type="hidden" id="news_id" name="news_id" value="' . $row['news_id'] . '">
    <input type="hidden" id="type" name="type" value="0">
    <input type="submit" id="comment_btn" class="comment-btn" name="comments<php echo $row['news_id'] ?>" value="Objavi">
</form>'

我的 php 代码如下所示:

if (isset($_POST['comments' . $row['news_id'] . '']) === true && empty($_POST['comment']) === false) {

global $user_data; 

$user_id    = $user_data['user_id'];
$connect_id = $_POST['news_id'];
$type       = $_POST['type'];
$time       = date('Y-m-d H:i:s');
$comment    = $_POST['comment'];
$comment    = sanitize($comment);

mysql_query("INSERT INTO `comments` (`user_id`, `connect_id`, `type`, `time`, `comment`) VALUES ('$user_id', '$connect_id', '$type', '$time', '$comment')");
}

如果我尝试做这样的事情:

$(".comment-btn").click(function(e) {
    e.preventDefault();

    var text = $('.comment-area').val();

    console.log(text);

    $('.comment-area').val('');
});

它仅针对第一个新闻的表单，而不针对所有表单。

有什么办法可以做到这一点不同吗？？？

感谢您的帮助。

Answer 1

您可以尝试如下操作:

$(".comment-btn").each(function(){
    $(this).click(function(e) {
        e.preventDefault();
        var commentArea = $(this).siblings(".comment-area");
        var text = commentArea.val();
        console.log(text);
        commentArea.val('');
    });
});

问题是，虽然此 $(".comment-btn") 返回您提到的表单中所有按钮的数组，但此 $(".comment-btn").click(... 仅为数组的第一项附加单击事件处理程序。

$(function(){ 
    $(".comment-btn").each(function(){
        $(this).click(function(e){
            e.preventDefault();
            var commentArea = $(this).siblings(".comment-area");
            var text = commentArea.val();
            console.log(text);
            commentArea.val('');
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data" class="comments" id="comments">
    <textarea id="comment_area" class="comment-area" name="comment" placeholder="Dodajte svoj komentar tukaj..."></textarea>
    <input type="hidden" id="news_id" name="news_id" value="' . $row['news_id'] . '">
    <input type="hidden" id="type" name="type" value="0">
    <input type="submit" id="comment_btn" class="comment-btn" name="comments<php echo $row['news_id'] ?>" value="Objavi">
</form>'

<form action="" method="post" enctype="multipart/form-data" class="comments" id="comments">
    <textarea id="comment_area" class="comment-area" name="comment" placeholder="Dodajte svoj komentar tukaj..."></textarea>
    <input type="hidden" id="news_id" name="news_id" value="' . $row['news_id'] . '">
    <input type="hidden" id="type" name="type" value="0">
    <input type="submit" id="comment_btn" class="comment-btn" name="comments<php echo $row['news_id'] ?>" value="Objavi">
</form>'

<form action="" method="post" enctype="multipart/form-data" class="comments" id="comments">
    <textarea id="comment_area" class="comment-area" name="comment" placeholder="Dodajte svoj komentar tukaj..."></textarea>
    <input type="hidden" id="news_id" name="news_id" value="' . $row['news_id'] . '">
    <input type="hidden" id="type" name="type" value="0">
    <input type="submit" id="comment_btn" class="comment-btn" name="comments<php echo $row['news_id'] ?>" value="Objavi">
</form>'