2016-11-07 8 views
1

プログラムでサーバー側に構築された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を知っていて、デバッグが簡単で「エラー」ではない場合は、その名前を付けるのが良いでしょう。

+0

でなければならない、あなたは気づきましたあなたは '$(this) '参照内にドル記号' '$'を複製しましたか?それとも変数名ですか? – another

+1

あなたは正しい@Roizpiです。今修正されましたが、それでも動作しません。 – Lovegiver

答えて

1

あなたはこのスニペットを見ることができます。

$(document).ready(function() { 
 
    $('.thread').each(function() { 
 
    var val = $(this).data("vote"); 
 
    $(this).find("p").text(val); 
 
    if (val == 1) { 
 
     $(this).find(".like").addClass('voted'); 
 
    } 
 
    else if (val == -1) { 
 
     $(this).find(".dislike").addClass('voted'); 
 
    } 
 
    }); 
 
});
.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; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

YOURエラー

    3行目の
  • 構文エラー:$($this)は、あなたが使用する必要があり、現在の.thread要素の中だけでDOMを操作するには$(this)
  • でなければなりませんJqueryの.find()関数
  • 行目と9行目に
  • 構文エラー:()しかし、あなたはまた、(.find使用する必要があります)(".like")$(".like")でなければならないライン6と9行に
  • 構文エラー:addClass(voted)addClass('voted')
+0

偉大な@アロニアイナ!! 明らかに私はこの「発見」方法について全く考えなかった。 多くのことがあります! – Lovegiver

+0

あなたの問題を解決するなら、アップホートして答えを受け入れることができます! – Aroniaina

+0

はい私は何の問題もなく答えに投票するつもりです。 もう1つ教えてください:どのツールを使用していますか? 私はEclipseとJSBinを使いますが、デバッグしてエラーを見つけるのは非常に難しいです(私はJS初心者です)。 – Lovegiver

関連する問題