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