Rumah > hujung hadapan web > tutorial js > jquery melaksanakan pergerakan label ke atas, bawah, dan top_jquery

jquery melaksanakan pergerakan label ke atas, bawah, dan top_jquery

WBOY
Lepaskan: 2016-05-16 16:02:08
asal
1482 orang telah melayarinya

cth: Contohnya, dalam senarai teg di latar belakang, fungsi bergerak ke atas, bergerak ke bawah dan melekat pada bahagian atas direalisasikan

Idea pelaksanaan utama ialah operasi nod, contohnya: naikkan, teruskan item yang diklik ke nod sebelumnya, dan seterusnya, sudah tentu, pelaksanaan kod sebenar perlu menambah beberapa pertimbangan, seperti sama ada semasa diklik item operasi sudah berada di bawah Atau ia ditetapkan ke bawah Jika ya, gesaan yang sepadan akan diberikan untuk memberitahu operator apa yang berlaku.

Perkara:

1. Kaedah pengklonan yang digunakan dahulu.klon(benar):

Maksudnya, simpan item yang sedang dialihkan untuk kegunaan kemudian.

2. Cari elemen berkaitan yang sepadan dengan teg semasa dan kaedah berkaitannya:

Contohnya: teg .prev() pada elemen semasa

teg .next() di bawah elemen semasa

Tambah kaedah selepas .after()xxx

.before() Tambahkan kaedah sebelum xxx

.prapend kaedah penambahan

3. Pelaksanaan

Kod khusus adalah seperti berikut:

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('亲,现在已是最下的哦,不能再下移了...'); 
    } 
  } 
}

Salin selepas log masuk

Di atas adalah semua kandungan yang dikongsi dengan anda dalam artikel ini, saya harap anda akan menyukainya.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan