Jquery.upvote.js只适用于第一行 - jquery.upvote.js only works for first row

我正在尝试使用这个jquery包:https://github.com/janosgyerik/jquery-upvote

然而，在我看来，投票只对第一个帖子有效，其余的都是不可点击的。我已经包含了所有必要的文件，我不确定为什么它会这样做。

@extends('layouts/default')
@section('content')
    <link rel="stylesheet" href="{{ URL::asset('assets/css/jquery.upvote.css') }}">
    <script src="{{ URL::asset('assets/js/jquery.upvote.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#topic').upvote();
        });
    </script>
    <h1>Subreddit: {{ $subreddit->name }}</h1>
    @foreach($posts as $post)
        <div class="row">
            <div class="span8">
                <div class="row">
                    <div class="col-md-12">
                        <h4><strong><a href="#"></a></strong></h4>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-1">
                        <div id="topic" class="upvote">
                            <a class="upvote"></a>
                            <span class="count">0</span>
                            <a class="downvote"></a>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <a href="#" class="thumbnail">
                            <img src="http://placehold.it/70x70" alt="">
                        </a>
                    </div>
                    <div class="col-md-10">
                        <p>
                            <a href="#">{{ $post->title }}</a>
                        </p>
                        <p style="color: darkgrey; font-size: 12px;">
                            <i class="glyphicon glyphicon-user" style="padding-right: 5px;"></i>submitted by <a href="#">{{ $post->user->name }}</a>
                             <i class="glyphicon glyphicon-calendar" style="padding-left: 15px;"></i> {{ $post->created_at->diffForHumans() }}
                             <i class="glyphicon glyphicon-comment" style="padding-left: 15px;"></i> <a href="#">3 Comments</a>
                             <i class="glyphicon glyphicon-tags" style="padding-left: 15px;"></i> Tags : <a href="#"><span class="label label-info">Snipp</span></a>
                            <a href="#"><span class="label label-info">Bootstrap</span></a>
                            <a href="#"><span class="label label-info">UI</span></a>
                            <a href="#"><span class="label label-info">growth</span></a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
@stop

id应该是唯一的，所以在您的代码中使用class代替。$('#topic')将只选择具有id的第一个元素，因此将id="topic" class="upvote"更改为class="upvote topic"

@extends('layouts/default')
@section('content')
    <link rel="stylesheet" href="{{ URL::asset('assets/css/jquery.upvote.css') }}">
    <script src="{{ URL::asset('assets/js/jquery.upvote.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.topic').upvote();
            //-^---- class selector
        });
    </script>
    <h1>Subreddit: {{ $subreddit->name }}</h1>
    @foreach($posts as $post)
        <div class="row">
            <div class="span8">
                <div class="row">
                    <div class="col-md-12">
                        <h4><strong><a href="#"></a></strong></h4>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-1">
                        <div class="upvote topic">
                        <!--               --^---- set it as class-->
                            <a 1class="upvote"></a>
                            <span class="count">0</span>
                            <a class="downvote"></a>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <a href="#" class="thumbnail">
                            <img src="http://placehold.it/70x70" alt="">
                        </a>
                    </div>
                    <div class="col-md-10">
                        <p>
                            <a href="#">{{ $post->title }}</a>
                        </p>
                        <p style="color: darkgrey; font-size: 12px;">
                            <i class="glyphicon glyphicon-user" style="padding-right: 5px;"></i>submitted by <a href="#">{{ $post->user->name }}</a>
                             <i class="glyphicon glyphicon-calendar" style="padding-left: 15px;"></i> {{ $post->created_at->diffForHumans() }}
                             <i class="glyphicon glyphicon-comment" style="padding-left: 15px;"></i> <a href="#">3 Comments</a>
                             <i class="glyphicon glyphicon-tags" style="padding-left: 15px;"></i> Tags : <a href="#"><span class="label label-info">Snipp</span></a>
                            <a href="#"><span class="label label-info">Bootstrap</span></a>
                            <a href="#"><span class="label label-info">UI</span></a>
                            <a href="#"><span class="label label-info">growth</span></a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
@stop