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

Question

我正在尝试通过单击带有 jQ​​uery 隐藏方法的按钮来隐藏 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);
});