jqueryはラベルを上へ、下へ、上へ移動

1768 ワード

eg:バックグラウンドのラベルリストで、上へ、下へ、上へ移動する機能を実現
主な実現構想はノード操作であり、例えば、上へ移動し、直接クリック項目を前のノードに移動するなど、もちろん実際のコード実現には、現在のクリック操作項目がすでに底を置いているか、底を置いているかどうか、もしそうであれば、操作者に何が起こっているのかを知らせるためのヒントを与える.
考え方:
1.先に使用するクローン方法.clone(true):
現在移動するアイテムを保存して、後で使用します.
2、現在のラベルに対応する関連要素とその関連方法を見つける:
例:prev()現在の要素の上のラベル
         .next()現在の要素の下にあるラベル
         .after()xxxの後にメソッドを追加
         .before()xxxの前にメソッドを追加
         .prepend追加方法
3、実現
具体的なコードは次のとおりです.

var productsLabel = { 
  //     
  setHot: function(t){ 
    var bar = 'showAndHide_box'; 
    var obj = $(t).parents('.'+bar).clone(true); 
    $(t).parents('.'+bar).remove(); 
    $(".showAndHide_list_box").prepend(obj); 
  },

  //     
  setUp: function(t){ 
    var bar = 'showAndHide_box'; 
    if($(t).parents('.'+ bar).prev('.'+bar).html() != undefined){ 
      var obj = $(t).parents('.'+bar).clone(true); 
      $(t).parents('.'+bar).prev().before(obj); 
      $(t).parents('.'+bar).remove(); 
    }else{ 
      alert(' ,        ,      ...'); 
    } 
  },

  //     
  setDown: function(t){ 
    var bar = 'showAndHide_box'; 
    if($(t).parents('.'+bar).next('.'+bar).html() != undefined){ 
      var obj = $(t).parents('.'+bar).clone(true); 
      $(t).parents('.'+bar).next().after(obj); 
      $(t).parents('.'+bar).remove(); 
    }else{ 
      alert(' ,        ,      ...'); 
    } 
  } 
}


以上は本文がみんなに分かち合うすべての内容で、みんなが好きになることを望みます.