用于迭代 css 类的 javascript 阅读更多链接工作

Question

我对产品进行了描述，其中一半的文本会在点击阅读更多链接时出现。连续有许多产品的描述。这些产品来自 rails 上的 ruby 环路。所以我为每个产品描述提供了剩余的文本类，如 class1、class2、class3 等。

然后对于一个产品描述，我将 javascript 编写为:

 $(function(){
   $('.read_more1').click(function(event){ 

     event.preventDefault();
     $('.more_text1').show();
     $('.read_more1').hide();

   });
 });

但由于产品数量是随机的。那么我如何迭代类以处理所有产品数量的阅读更多链接。

Ruby .html.erb 代码

<% if @example[:products] %>
  <% @example.company.each do |company| %>
    <% if !company[:display_company] %>
    <div class="field no_margin">
      <b class="space-bold"><%= company[:category_name].titleize %>
      </b>

    <% file_name = 
       get_file_name_from_url(company.public.first.photo_url) %>
    <%= link_to image_tag(file_public_path(url: @example[:url], \
                            id: company._id.to_s, mod_id: company.public.first._id.to_s, \ ), \
                            company_public_path(url: @example[:url], id: company._id.to_s) %>
    <div class="linespace">
      <%= ("company[:category])[0..30]} #{ link_to t('more'),  \
          { :pics=> true}, { :class => "read_more#{count}"}} <text class=more_text#{count}>#{t(company[:category])[31..-1]}
           </text>").html_safe %><br />

      <% count += 1 %>  

    </div>
  </div>
<% end %>

理解起来很复杂。

Answer 1

您可以使用 CSS 选择器来选择以给定字符串开头的任何类像这样的东西:

$(function(){
     $('[class^="read_more"]').click(function(event){ 

       event.preventDefault();
       let suffix = this.className.split('read_more')[1];
       $(`[class^="more_text${suffix}"]`).show();
       $(`[class^="read_more${suffix}"]`).hide();

   });
});