【问题标题】:How to loop DIV and HTML classes in a JSP with jQuery?如何使用 jQuery 在 JSP 中循环 DIV 和 HTML 类?
【发布时间】: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 = 未投票或已通过投票。

每个&lt;div&gt; 都包含一个帖子。

$(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。它现在已更正,但仍然无法正常工作。

标签: jquery html jsp loops


【解决方案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>

您的错误

  • 第 3 行的语法错误:$($this) 必须是 $(this)
  • 要仅操作当前.thread 元素内的dom,您应该使用Jquery 的.find() 函数
  • 第 6 行和第 9 行的语法错误:(".like") 必须是 $(".like")(但您也应该使用 .find())
  • 第 6 行和第 9 行的语法错误:addClass(voted) 必须是 addClass('voted')

【讨论】:

  • 伟大的@aroniaina !显然我根本没有考虑过这种“查找”方法。非常感谢!!
  • 如果它解决了您的问题,您可以投票并接受答案!
  • 是的,我会毫无问题地为您的答案投票。再告诉我一件事:您使用哪些工具?我个人使用 Eclipse 和 JSBin,但是很难调试和发现我的错误(我是 JS 的优秀初学者)。
  • 我的IDE是netbeans,没调试,亲眼看到的!但是您可以将开发者工具用作firebugweb developper浏览器插件。
  • 再次感谢@aroniaina!当我开始使用 JS 和 jQuery 时,我的眼睛仍然是盲目的。幸运的是,我有时会遇到像你这样教我很多东西的人。赛亚。
猜你喜欢
  • 1970-01-01
  • 2017-02-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-08-16
  • 1970-01-01
  • 1970-01-01
  • 2012-11-02
相关资源
最近更新 更多