Question

我有两个<ul>：

<ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default">
        // I show the parameters of the row
    </li>
</ul>


<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight">
        // I show the parameters of the row
    </li>
</ul>

当用户按下sortable1行的参数时，我希望它淡出并淡入sortable2。

请注意，在fadein中，我必须将<ul id="sortable1" class="connectedSortable">和<li class="ui-state-default">更改为：<ul id="sortable2" class="connectedSortable">和<li class="ui-state-highlight">。

我尝试在application.js中定义：

$(document).ready(function(){
    $(this).closest('li').fadeOut(function() {
       $(this).closest('ul#sortable2').fadeIn(3000);
    });
});

$(document).ready(function(){
    $('.highlight_on_success').bind("ajax:success", function(){

      $(this).closest('li').fadeOut(3000);    

    });
});

但它不起作用。

这是我的index.html.erb：

<html>
<body>

<div id ="mydiv">

<ul id="sortable1" class="connectedSortable"> 
  <% @tasks_worker_todo.each do |task| %>
        <li class="ui-state-default">
            <%= best_in_place task, :done, :classes => 'highlight_on_success', type: :checkbox,collection: %w[False True] %> | 
            <%= task.admin_mail %> | 
            <%= task.task %>
        </li>
  <% end %>
</ul>


<br><br>

<ul id="sortable2" class="connectedSortable">
  <% @tasks_worker_done.each do |task| %>
        <li class="ui-state-highlight">
            <%= best_in_place task, :done,:classes => 'highlight_on_success', type: :checkbox, collection: %w[False True] %>| 
            <%= task.admin_mail %> | 
            <%= task.task %>
        </li>
  <% end %>
</ul>

</div>

</body>
</html>

Answer 1

试试这个：

jQuery(document).ready(function(){
    jQuery("#sortable1").click(function(){
         jQuery("#sortable1").fadeOut(500);
         jQuery("#sortable2").fadeIn(500);
    });

    jQuery("#sortable2").click(function(){
         jQuery("#sortable2").fadeOut(500);
         jQuery("#sortable1").fadeIn(500);
    });
});

从一张桌子淡出，淡入淡出到另一张桌子

1 个答案: