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
相关文章:
- 拆分文本以每隔n个字符添加一行新行,并注意空格
- 动态插入的表:JQuery未检测到最后一行
- 在终端中运行 JavaScript 时(使用 rhino),如何使用 print() 函数在一行中打印
- 如何在Angular UI网格中选择下一行
- 通过单击动态加载的表中同一行的另一个字段来更新一行的字段
- Jquery幻灯片以一行左侧的图像开始,但我希望它从右端开始
- 从重复的javascript数组结果集中只获取一行
- 在GridView中,当单击复选框时,在网格的同一行中使用JavaScript将标签中的值添加到TextBox
- html5画布在同一行中写入多个字体
- Angular JS在一行中查找最小值
- 是否排除节点中错误堆栈的第一行?/节点中的自定义错误类型
- 谷歌地图-数据库中的标记只显示最后一行的信息
- 如何确保JQuery的一行在另一行之前运行
- PHP&CSS:如何获得表中每一行的悬停效果
- 文本区域-获取每一行,找到换行符
- 允许为显示的每个数据表选择一行
- Javascript:将多个表打印成一行,然后再打印
- 隐藏的锚链接下降在下一行一旦显示
- 在多行图表中,在每一行的末尾,我想要一个小圆圈和使用d3.js的端点值
- Jquery.upvote.js只适用于第一行