[英]Iterating through array in Rails as separate jQuery objects
我正在遍历Rails中的数组以显示一组文章。 我想要一个按钮来滑动切换单击时打开的文章(因此每个都是标题和按钮,并且在单击按钮时会显示文本)。
该数组如下所示:
<% @articles.each do |article| %>
<div class="article_header">
<h1><%= article.title %></h1>
<button id="clickme" type="button">Show More!</button>
<div class="article_content">
<p><%= markdown article.content %></p>
</div>
<% end %>
</div>
然后,我尝试使用以下命令切换article_content:
<script>
$( ".article_content" ).hide()
$( "#clickme" ).click(function() {
$( ".article_content" ).slideToggle( "300", function() {
});
});
</script>
在阅读了其他一些问题之后,我相信问题是article_content
是一个类,这就是为什么按钮当前会打开并折叠所有内容文本的原因。
如果要遍历数组,是否可以将不同的ID分配给目标作为我的对象,因此单击第1条的按钮只能打开和关闭第1条?
除非有特殊原因要为按钮分配ID,否则请在按钮上设置一个类,然后可以使用.next()
来实现所需的功能。
jQuery的:
$(".clickme").click(function() {
$(this).next(".article_content").slideToggle("300", function() {});
});
HTML:将id="clickme"
更改为class="clickme"
这将允许您以所需的方式切换多个元素。
下面的演示
$(".article_content").hide() $(".clickme").click(function() { $(this).next(".article_content").slideToggle("300", function() {}); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="article_header"> <h1> article 1 </h1> <button class="clickme" type="button">Show More!</button> <div class="article_content"> <p> content 1 </p> </div> </div> <div class="article_header"> <h1> article 2 </h1> <button class="clickme" type="button">Show More!</button> <div class="article_content"> <p> content 2 </p> </div> </div>
使按钮选择器也成为一个类:
<button class="clickme" type="button">Show More!</button>
然后尝试找到该按钮最近的article_content
。 jQuery部分看起来像这样:
<script>
$( ".article_content" ).hide()
$( "button.clickme" ).click(function() {
$(this).siblings( ".article_content" ).slideToggle( "300", function({});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.