javascript - Rails 如何在 div 表中插入部分内容？

Question

我正在使用 Rails，并且我有一个由 div 组成的表格。我希望用户能够单击表格单元格并在其下方滑出一个菜单(以另一个 div 行的形式)。第二次单击该单元格时，菜单应滑回。

每行应该有 2 个不同的菜单/单击操作。我想在单击的操作下方添加/删除一个 div。我尝试过使用表格，但 div 似乎效果更好。我只是真的不知道如何正确渲染部分。我的代码:

js:

$(document).ready(function () {
  openBuySliders = [];
  openSellSliders = [];

  function openSlider(parent, actionType) {
    $(    *some partial file*       ).insertAfter( parent );
  }

  function closeSlider() {
    // remove the slider
  }

  $("div[buy-stocks]").click(function() {
    var parent = $(event.target).parent()

    if ($.inArray(cellID, openBuySliders) == -1) {
      openBuySliders.push(cellID);
      openSlider(parent, "buy");
    }else {
      var index = openBuySliders.indexOf(cellID);
      openBuySliders.splice(index, 1);
      closeSlider(parent);
    }
  })

  $("div[sell-stocks]").click(function() {
    var parent = $(event.target).parent()

    alert(test);
    if ($.inArray(cellID, openSellSliders) == -1) {
      openSellSliders.push(cellID);
      openSlider(parent, "sell");
    }else {
      var index = openSellSliders.indexOf(cellID);
      openSellSliders.splice(index, 1);
      closeSlider(parent);
    }
  })

});

我的html:

<div class="rTable">
  <div class="rTableRow">
    <div class="rTableHead"><strong>Company</strong></div>
    <div class="rTableHead"><strong>Stocks available</strong></div>
    <div class="rTableHead"><strong>Stocks owned</strong></div>
  </div>

  <% current_game.companies.each do |company|%>
    <div class="rTableRow" row-id="<%= company.id%>">
      <div class="rTableCell"> <%= company.name %> </div>
      <div class="rTableCell" buy-stocks="<%= game_player_view_path%>"> <%= company.stocks.size %> </div>
      <div class="rTableCell" sell-stocks="<%= game_player_view_path %>"> <%= @player.stocks.where(company_id: company.id).size %> </div>
    </div>
  <% end %>
</div>

我的 Controller :

def show
  respond_to do |format|
      format.html
      format.js   { render :nothing => true }
  end
end

我正在尝试使用 jquery insert after 来渲染它，但这可能不是最聪明的解决方案。我在应用程序中的 JS 方面确实遇到了困难，因此非常感谢您的帮助。

Answer 1

我建议这样:

HTML:

<table>
  <tr>
    <td> 
      <div class='click-me'> Content </div>
      <div class='menu' style='display:none'> Hidden </div>
    </td>
  </tr>
</table>

JS:

 $(document).ready(function() {
   $('.click-me').click(function(e) {
     var target = $(e.target);
     target.parent().find('.menu').toggle();
   });
 });