Javascript 如何从laravel blade循环中获取jQuery的变量类名
我想显示/隐藏每个评论的回复。为了做到这一点,我的jQuery选择器必须是变量类名,这样我就可以显示/隐藏特定注释的回复,而不会影响其他注释的回复。我已经编写了PHP代码,在类中添加了注释id,以使类不同。但是我从LaravelBlade循环中获得了这些ID,我不知道如何在jQuery中做到这一点。这是我的blade.php-Javascript 如何从laravel blade循环中获取jQuery的变量类名,javascript,php,jquery,laravel,loops,Javascript,Php,Jquery,Laravel,Loops,我想显示/隐藏每个评论的回复。为了做到这一点,我的jQuery选择器必须是变量类名,这样我就可以显示/隐藏特定注释的回复,而不会影响其他注释的回复。我已经编写了PHP代码,在类中添加了注释id,以使类不同。但是我从LaravelBlade循环中获得了这些ID,我不知道如何在jQuery中做到这一点。这是我的blade.php- @foreach($comments as $comment) <div class="box-comment"> <div class="
@foreach($comments as $comment)
<div class="box-comment">
<div class="comment-text">
{{$comment->body}}<br />
<button class="btn btn-link text-muted toggle-replies-{{$comment->id}}">Show/Hide Replies</button>
</div> <!-- /.comment-text -->
</div> <!-- /.box-comment -->
<div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;">
<input type="text" placeholder="Write a reply...">
</div>
@foreach($comment->replies as $reply)
@if($comment->id == $reply->comment_id)
<div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;">
<div class="comment-text">
{{$reply->body}}
</div> <!-- /.comment-text -->
</div> <!-- /.box-comment -->
@endif
@endforeach
@endforeach
这是jQuery:
<script>
$(document).ready(function() {
$(".toggle-comments").click(function(){
$(".comment-box").slideToggle();
});
$(".toggle-replies-1").click(function(){
$(".reply-box-1").slideToggle();
});
});
</script>
我已经手动将“1”放在那里,它显示/隐藏第一条评论的回复。我需要为所有的评论做这件事。这应该不难,但我仍在学习jQuery。我希望有人能帮我。试试这个:
@foreach($comments as $comment)
<div class="box-comment">
<div class="comment-text">
{{$comment->body}}<br />
<button class="btn btn-link text-muted show_hide_replies" id="{{$comment->id}}">Show Replies</button>
</div>
</div>
<div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;">
<input type="text" placeholder="Write a reply...">
</div>
@foreach($comment->replies as $reply)
@if($comment->id == $reply->comment_id)
<div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;">
<div class="comment-text">
{{$reply->body}}
</div>
</div>
@endif
@endforeach
@endforeach
<script type="text/javascript">
$(document).ready(function() {
$(".toggle-comments").click(function(){
$(".comment-box").slideToggle();
});
$(".show_hide_replies").click(function(ev) {
var getElem = $(this).attr("id");
$(".reply-box-"+getElem).slideToggle()
$(this).text(function(i, text){
return text === "Show Replies" ? "Hide Replies" : "Show Replies";
})
})
});
</script>
谢谢,它工作正常。你能再帮我一点忙吗?我想更改切换上的按钮文本。如果显示回复,我希望按钮显示隐藏回复。否则它应该说显示回复