jquery mendapat nilai indeks elemen semasa example

jquery mendapat nilai indeks elemen semasa example_jquery

WBOY

Lepaskan： 2016-05-16 15:56:17

asal

1294 orang telah melayarinya

Contoh dalam artikel ini menerangkan penggunaan jquery untuk mendapatkan nilai indeks unsur semasa. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Apabila melakukan kesan putaran imej pada halaman promosi hari ini, sebelah kiri nombor halaman di bawah perlu memaparkan maklumat penerangan imej Kesannya adalah seperti berikut:

Perkara:

Apabila bahagian halaman berada dalam keadaan semasa, gaya "aktif" akan ditambah.

Dengan mendapatkan nilai indeks li class="active", maklumat perihalan imej yang sepadan ditemui dan dipaparkan.

Penyelesaian:

Kesan ini boleh dicapai dengan mudah melalui indeks jquery().

Kodnya adalah seperti berikut:

HTML:

<div id="carousel"> 
  <div id="carouselimg"> 
 <div id="imgcontainer"> 
   <a href="#" mce_href="#"><img src="" /></a> 
   <a href="#" mce_href="#"><img src="" /></a> 
   <a href="#" mce_href="#"><img src="" /></a> 
   <a href="#" mce_href="#"><img src="" /></a> 
   <a href="#" mce_href="#"><img src="" /></a> 
 </div> 
  </div> 
  <div id="carouseltitle"> 
 <div class="carouseltext"> 
   <span> </span> 
   <span> </span> 
   <span> </span> 
   <span> </span> 
   <span> </span> 
 </div> 
 <ul> 
   <li><span>1</span></li> 
   <li><span>2</span></li> 
   <li><span>3</span></li> 
   <li><span>4</span></li> 
   <li><span>5</span></li> 
 </ul> 
  </div> 
</div>

Salin selepas log masuk

JavaScript:

<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></SCRIPT> 
<SCRIPT type=text/javascript>  
var carousedata = [ 
  {index:0,link:"http://www.dangdang.com",imgsrc:"1.jpg",text:"数千款名品手机6折起"}, 
  {index:1,link:"http://www.baidu.com",imgsrc:"2.jpg",text:"测试文本2"}, 
  {index:2,link:"http://www.google.com",imgsrc:"3.jpg",text:"测试文本3"}, 
  {index:3,link:"http://www.soso.com",imgsrc:"xf.jpg",text:"测试文本4"}, 
  {index:4,link:"http://www.jb51.net",imgsrc:"py.jpg",text:"测试文本5"} 
]; 
$(document).ready(function(){ 
  $("#imgcontainer a").each(function(i){ 
 $(this).attr("href",carousedata[i].link); 
 $(this).children("img").attr("src",carousedata[i].imgsrc); 
  }); 
  $(".carouseltext span").each(function(i){ 
 $(this).text(carousedata[i].text); 
  }) 
  setInterval(function(){ 
 var li_index = $("#carouseltitle ul li").index($("#carouseltitle ul li.active")[0]); 
 $(".carouseltext span").hide(); 
 $(".carouseltext span").eq(li_index).show(); 
  },10); 
}); 
</script>

Salin selepas log masuk

Di sini, saya menggunakan setinterval dan mencari setiap 10ms.

Terdapat kawasan di mana kod ini boleh dioptimumkan.

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.