使用jquery但具有动态内容的可折叠描述(collapsable description using jquery but with dynamic content)

使用jquery但具有动态内容的可折叠描述(collapsable description using jquery but with dynamic content)

我正在迭代即将到来的'指南'的数据库。 每个指南都带有描述，可能有点长，占用了大量空间。 所以，我试图实现引导'崩溃'功能，但它不适合动态生成的内容，（每个数据切换的东西都需要unqiue ..不？）所以当我按下按钮时它只激活一个。

<% if @guide.any? %> <% @guide.each do |guide| %> <div class="guide-list col-md-5"> <h2 class='guide-title'><%= guide.title %></h2> <h4 class='guide-date'>From <%= guide.date_starting.strftime("%B %d") %> to <%= guide.date_ending.strftime("%B %d") %></h4> <div class='col-md-12'> <%= image_tag guide.image(:med), :class => 'guide-image' %> <% if guide.description.empty? %> <h4>No description available</h4> <% else %> <p class='guide-description'><%= guide.description %></p> <% end %> </div> <h4><%= guide.extra_info %></h4> </div> <% end %> <% else %> <h1>PLEASE COME BACK SOON </h1> <% end %>

我有一个我在以前的应用程序中使用的代码，我花了很多时间尝试为我当前的应用程序配置它，但我只是不能！ 我的Javascript留下了很多不足之处。

$(document).ready(function() { return $(".comment-link").on("click", function(event) { var commentArea, postUrl; event.preventDefault(); postUrl = $(this).data("post-url"); commentArea = $(this).closest('.comment-price').find('.comments'); return $.get(postUrl, function(post) { post.comments.forEach(function(comment) { return commentArea.html("<li>" + comment.content + "</li> - comment added @ " + comment.added + " by " + comment.username); }); if (commentArea.is(':visible')) { return commentArea.slideUp(); } else { return commentArea.slideDown(); } }); }); });

任何帮助将不胜感激

I am iterating through a db of upcoming 'Guides'. Each guide comes with description that can be somewhat long and takes up a lot of space. So, I attempted to implement the bootstrap 'collapse' function however it doesn't cater for dynamically generated content, (each data toggle thingy needs to be unqiue.. no?) so when I press the button on one it only activates one.

<% if @guide.any? %> <% @guide.each do |guide| %> <div class="guide-list col-md-5"> <h2 class='guide-title'><%= guide.title %></h2> <h4 class='guide-date'>From <%= guide.date_starting.strftime("%B %d") %> to <%= guide.date_ending.strftime("%B %d") %></h4> <div class='col-md-12'> <%= image_tag guide.image(:med), :class => 'guide-image' %> <% if guide.description.empty? %> <h4>No description available</h4> <% else %> <p class='guide-description'><%= guide.description %></p> <% end %> </div> <h4><%= guide.extra_info %></h4> </div> <% end %> <% else %> <h1>PLEASE COME BACK SOON </h1> <% end %>

I have this code which I used in a previous app, I have spent ages trying to configure it for my current app but i just cant! My Javascript leaves a lot to be desired.

$(document).ready(function() { return $(".comment-link").on("click", function(event) { var commentArea, postUrl; event.preventDefault(); postUrl = $(this).data("post-url"); commentArea = $(this).closest('.comment-price').find('.comments'); return $.get(postUrl, function(post) { post.comments.forEach(function(comment) { return commentArea.html("<li>" + comment.content + "</li> - comment added @ " + comment.added + " by " + comment.username); }); if (commentArea.is(':visible')) { return commentArea.slideUp(); } else { return commentArea.slideDown(); } }); }); });

Any Help would be greatly appreciated

最满意答案

基本上，您的问题是您需要指定在单击触发器时要切换的区域。 处理此问题的最佳方法是使用jQuery parent（）方法。

例如：

$(document).ready(function() { // The jQuery selectors you want to use as triggers var selectors = $('.guide-list .guide-title'); selectors.click(function() { var selector = $(this); // The element that was clicked var parent = selector.parent(); // The parent element of that element var target = parent.find('.guide-description'); // The element to expand/collapse if(target.is(':visible')) { target.slideUp(); } else { target.slideDown(); } } }

i managed to do it by using the bootstrap.js collapse in the end. I just dynamically created the id link.

<div class="accordion" id="categories"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle btn" data-toggle="collapse" data-parent="#accordion" href=" #info_<%= guide.id %>"> <h2 class='glyphicon glyphicon-info-sign'></h2> </a> <div id="info_<%= guide.id %>" class="accordion-body collapse"> <div class="acccordion-inner"> <% if guide.description.empty? %> <h4>No description available</h4> <% else %> <p class='guide-description'><%= guide.description %></p> <% end %> </div> </div> </div> </div>