javascript - jquery.upvote.js仅适用于第一行

我正在尝试使用以下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

关于javascript - jquery.upvote.js仅适用于第一行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32547064/