0

私は2つ持っています<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").クリック(関数(){
         jQuery("#sortable1").fadeOut(500);
         jQuery("#sortable2").fadeIn(500);
    });

    jQuery("#sortable2").クリック(関数(){
         jQuery("#sortable2").fadeOut(500);
         jQuery("#sortable1").fadeIn(500);
    });
});
于 2013-01-10T11:29:14.057 に答える