使用jQuery按類別刷新div

Question

我使用foreach循環使用PHP進行表格渲染。

@foreach ($comments as $comment)

                <tr>
                    <td>{{ $comment->lot_date }}
                        <br>
                        @if (count($comment->ourcar) >= 1)
                            <p>Saved</p>
                        @else
                            <form method="POST" action="/comments/{{ $comment->id }}/ourcars">
                                {{ csrf_field() }}
                                <button type="submit" class="btn btn-xs btn-primary">Our Car</button>
                            </form>
                        @endif
                    </td>
                    <td>
                        <a href="{{ route('comments.show', $comment->id) }}">{{ $comment->bid }}</a>
                    </td>
                    <td>{{ $comment->auction_name }}</td>
                    <td class="block">
                        @foreach(explode('#', $comment->pics_urls, 3) as $pic)
                            <a href="{{ $pic }}" class='iframe'>
                                <img src="{{ $pic }}" class="img-fluid" width="30" height="32">
                            </a>
                        @endforeach
                    </td>
                    <td>{{ $comment->company }}</td>
                    <td>{{ $comment->model_name_en }}</td>
                    <td>{{ $comment->model_type_en }}</td>
                    <td>{{ $comment->grade_en }}</td>
                    <td>{{ $comment->model_year_en }}</td>
                    <td>{{ $comment->color_en}}</td>
                    <td>{{ $comment->displacement }}</td>
                    <td>{{ $comment->transmission_en }}</td>
                    <td>{{ $comment->scores_en }}</td>
                    <td>{{ $comment->mileage_num }}</td>
                    <td>{{ $comment->start_price_en }}</td>
                    <td><div class="comment-body">{{ $comment->body }}</div></td>
                    <td>{{ $comment->lot->result_en or '---' }}</td>
                    <td>{{ $comment->user->name }}
                    <td>
                        <button data-id="{{ $comment->id  }}" class="btn-link editButton"><span class='glyphicon glyphicon-edit'></span></button>
                    </td>
                    <td>
                        <form method="POST" action="{{route('comments.destroy', ['id' => $comment->id]) }}">
                            {{ method_field('DELETE') }}
                            {{ csrf_field() }}
                            <div class="form-group">
                                <button type="submit" class="btn-link" onclick="return confirm('Are you sure?')"><span class='glyphicon glyphicon-trash' style="color:red"></span></button>
                            </div>
                        </form>
                    </td>

                </tr>

            @endforeach

我創建一個模式窗口，以使用JS向行添加注釋。 我提交評論並關閉模態后，我想刷新<td class="comment-body">comment</td>

所以我在按類刷新div時遇到問題，因為可以循環使用表，所以可以使用id：

$(function() {
            $('.editButton').click(function (e) {
                var button = $(this);

                var geturl = '/comments/' + button.data('id') + '/edit';

                var posturl = '/comments/' + button.data('id');

                $.get(geturl)
                    .done( (response) => {
                        bootbox.dialog( {
                            title : "Add comment",
                            message : response,
                            buttons : {
                                addButton : {
                                    label : 'Add comment',
                                    className : 'btn btn-primary',
                                    callback: () => {
                                        var modalForm = $('#modalForm');

                                        if ($('#commentBody').val()) {
                                            $.ajax({
                                                type : 'POST',
                                                url : posturl,
                                                data : modalForm.serialize(),
                                                success : (response) => {
                                                    if (response === "ok") {
                                                        bootbox.hideAll();
                                                        $('.comment-body').toggle();


                                                    }
                                                }
                                            })
                                        }
                                        return false;
                                    }
                                },
                                closeButton : {
                                    label : 'Close',
                                    className : 'btn btn-default'
                                }
                            }
                        })
                    })
                    .fail( ( errorResponse ) => {
                        bootbox.alert('Error! Comment is not added');
                    });

            });

        });
    </script> 

我的模態視圖：

<div class="modal-body">
    <form action="#" id="modalForm" data-id="{{ $comment->id }}">
        <div class="form-group">
            {{ csrf_field() }}
            {{ method_field('PUT') }}
            <textarea name="body" id="commentBody"
                      placeholder="Add Your Comment Here." class="form-control" required>{{ $comment->body }}</textarea>
        </div>
    </form>
</div>

結果如下：

我試圖使用$('.comment-body').toggle(); 但它不起作用。 編輯評論后應如何刷新該div？

Answer 1

var old_comment = $('.comment-body').text();
$('.comment-body').text(old_comment + '\n' + new_comment);

我不太了解您的刷新情況 。 上面的代碼是在舊的注釋后面添加新的注釋。

Answer 2

如果我明白你的意思 ..我認為這很簡單

1st ：您需要在var button = $(this);之后使用var button = $(this);

var comment_section = button.closest('tr').find('.comment-body');

第二個 ：關於ajax成功的回調函數

comment_section.text($('#commentBody').val());

Answer 3

設置元素的innerHTML以填充它，或使用空字符串將其清除：

$('.comment-body').html("New Comment") // New contents
$('.comment-body').html("") // Clear contents

如果表的多行中有一個.comment-body ，而您只想“刷新” 其中一個 ，則需要指定一個ID，以便可以查明包含該單元格的行。 例如..

<tr id="row1"><td class="comment-body">..comment..</td><tr>

$("#row1").find(".comment-body").html("New Comment Text")

注意：除了.html您還可以使用.text來防止用戶注釋中的html代碼注入您的頁面。

Answer 4

$('.comment-body').('');

試試這個或

$('.comment-body').html('');