プログラムでサーバー側に構築されたJSPをループしたいと思います。 JSPには、ユーザーによって書き込まれたさまざまな数のポストが表示されます。 現在接続されているユーザーが特定の投稿に対して賛成または反対の投票をした場合、対応する好き嫌いのボタンを明るくしたいと思いますが、これは詳細です。jQueryを使ってJSPでDIVクラスとHTMLクラスをループする方法は?
私の問題は、JSTLステートメントと統合されたいくつかの値を保存する場所に作成した別の "div"と "class"をループすることです。ここで
は私のJSP(私はjQueryのループを作成しようとするが、成功事例のなしJSBinからコピー)のHTML表現です:
<!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>
「データポストは」postIdと "データが含まれています-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) '参照内にドル記号' '$'を複製しましたか?それとも変数名ですか? – another
あなたは正しい@Roizpiです。今修正されましたが、それでも動作しません。 – Lovegiver