Question

我正在迭代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条吗？

Answer 1

除非您有特定的理由将ID分配给按钮，然后在按钮上设置一个类，然后您可以使用.next()来实现您想要的目标。

<强> jquery的：

$(".clickme").click(function() {
  $(this).next(".article_content").slideToggle("300", function() {});
});

Html：将id="clickme"更改为class="clickme"

这将允许您按照自己的方式切换多个元素。

演示

＆＃13;

$(".article_content").hide()
$(".clickme").click(function() {
  $(this).next(".article_content").slideToggle("300", function() {});
});

＆＃13;

<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>

＆＃13;

Answer 2

使按钮选择器也成为一个类：

<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>

迭代Rails中的数组作为单独的jQuery对象

2 个答案: