0

我有两个<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。

请注意，在淡入淡出我必须改变<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>
4

1 回答 1

1

试试这个 ：

jQuery(文档).ready(函数(){
    jQuery("#sortable1").click(function(){
         jQuery("#sortable1").fadeOut(500);
         jQuery("#sortable2").fadeIn(500);
    });

    jQuery("#sortable2").click(function(){
         jQuery("#sortable2").fadeOut(500);
         jQuery("#sortable1").fadeIn(500);
    });
});
于 2013-01-10T11:29:14.057 回答