【发布时间】:2016-11-07 11:39:56
【问题描述】:
我想在以编程方式构建服务器端的 JSP 上循环。 JSP 显示用户撰写的不同数量的帖子,并为每个帖子显示喜欢/不喜欢按钮。 如果当前连接的用户对给定的帖子投票喜欢或不喜欢,我想让相应的喜欢/不喜欢按钮更亮(但这是一个细节)。
我的问题是循环访问我创建的不同“div”和“class”,其中存储了一些与 JSTL 语句集成的值。
这是我的 JSP 的 HTML 表示(从我尝试创建 jQuery 循环但没有成功的 JSBin 复制):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style>
.like{
color: green;
}
.dislike{
color: red;
}
.thread{
padding: 5px;
border-style: solid;
border-width: 1px;
margin: 5px;
}
.voted{
border-width: 2px;
border-color: blue;
background-color: gold;
}
</style>
</head>
<body>
<div class="thread" data-post="1" data-vote="0">
<input type="button" value="Like" class="like"/>
<input type="button" value="Dislike" class="dislike"/>
<p class="postId"></p>
</div>
<div class="thread" data-post="2" data-vote="1">
<input type="button" value="Like" class="like"/>
<input type="button" value="Dislike" class="dislike"/>
<p class="postId"></p>
</div>
<div class="thread" data-post="3" data-vote="0">
<input type="button" value="Like" class="like"/>
<input type="button" value="Dislike" class="dislike"/>
<p class="postId"></p>
</div>
<div class="thread" data-post="4" data-vote="-1">
<input type="button" value="Like" class="like"/>
<input type="button" value="Dislike" class="dislike"/>
<p class="postId"></p>
</div>
<div class="thread" data-post="5" data-vote="0">
<input type="button" value="Like" class="like"/>
<input type="button" value="Dislike" class="dislike"/>
<p class="postId"></p>
</div>
<div class="thread" data-post="6" data-vote="1">
<input type="button" value="Like" class="like"/>
<input type="button" value="Dislike" class="dislike"/>
<p class="postId"></p>
</div>
<div class="thread" data-post="7" data-vote="0">
<input type="button" value="Like" class="like"/>
<input type="button" value="Dislike" class="dislike"/>
<p class="postId"></p>
</div>
<hr>
</body>
</html>
"data-post" 包含 postId,"data-vote" 包含已连接用户的投票值:1 = 喜欢,-1 = 不喜欢, 0 = 未投票或已通过投票。
每个<div> 都包含一个帖子。
$(document).ready(function(){
$(".thread").each(funtion(){
var val=$($this).data("vote");
$("p").text(val);
if(val == 1){
(".like").addClass(voted);
}
else if (val == -1){
(".dislike").addClass(voted);
}
});
});
这个 jQuery 函数不起作用,我真的不知道为什么。我似乎有语法错误,但我没有找到它(或它们)。
有人可以帮我让这个 jQuery 运行并循环我的 JSP 吗?
PS : 如果有人知道一个 JS/jQuery IDE 可以更轻松地进行调试,而不仅仅是“错误”,最好能给出它的名字。
【问题讨论】:
-
您是否注意到您在
$(this)引用中复制了美元$符号?还是变量名? -
是的,你是对的@Roizpi。它现在已更正,但仍然无法正常工作。