jQuery使用Rails和HAML上的link_to通过按钮单击隐藏html列

Question

我试图用jQuery hide方法单击按钮来隐藏html列。

这是我的html：

  %br.clear
  - @cards.each do |card|
  %div{class: "hide_#{card.id}"} <- added this to solve issue
    .existing-credit-card-details.nine.columns.omega.alpha{id: dom_id(card)} <- this is my target
      .cc-select.one.column.alpha.omega
        Random text here
      .cc-type.three.columns.alpha.omega{class: card.card_type.downcase}
        %span.mobile-heading.em Card Type
        .icon
        %span.type= card.card_type
      .cc-number.two.columns.alpha.omega
        %span.mobile-heading.em Number
        ****
        Random text here
      .cc-expiration.two.columns.alpha.omega
        %span.mobile-heading.em Expiration Date
        Random card expiration dates
      .cc-expiration.two.columns.alpha.omega
        %span.mobile-heading.em
        = link_to (image_tag("icons/delete.png")),
            spree.credit_card_url(card),
            :remote => true, :method => :delete,
            :id => 'delete_card'
    %br.clear

！[看起来是这样] [1]

link_to按钮等于： <a href="http://localhost:9393/credit_cards/12211" id="delete_card" data-method="delete" data-remote="true" rel="nofollow"><img alt="Delete" src="/assets/icons/delete.png"></a>

我尝试使用以下Javascript：

      $(document).ready(function(){
        $("#delete_card").click(function(){
          $(".existing-credit-card-details nine columns omega alpha" id="<%= dom_id(card) %>").hide(1000);
        });
      });

因此，当我单击#delete_card时，existing-credit-card-details.nine.columns.omega.alpha {id：dom_id（card）}应该被隐藏。

我试图通过查看其他问题并在线浏览来解决问题，但是我的JS技能却缺乏。

解：

添加：

      $(document).ready(function(){
        $(".delete_card").on("click", function(){
          $(this).parents(".hide_#{card.id}").hide("fast");
        });
      });

Answer 1

好的，我认为您可以执行以下操作：

$("#delete_card").click(function(){ 
     $(".existing-credit-card-details nine columns omega alpha").find('id', 'the id you are looking for').hide(1000);
});