数组添加数据
//html结构
<div class="list"> <div class="intro_size"> <img src='.jpg'/> <div class="nent-sz"> <h2>胡哲</h2> <p>1911年出生,.....</p> <p><input type="button" value="更多" class="more_btn" data-index="0"/></p> </div> </div> <div class="intro_size"> <img src='.jpg'/> <div class="nent-sz"> <h2>胡哲</h2> <p>1911年出生,.....</p> <p><input type="button" value="更多" class="more_btn" data-index="1"/></p> </div> </div> <div class="intro_size"> <img src='.jpg'/> <div class="nent-sz"> <h2>胡哲</h2> <p>1911年出生,.....</p> <p><input type="button" value="更多" class="more_btn" data-index="2"/></p> </div> </div> <div class="intro_size"> <img src='.jpg'/> <div class="nent-sz"> <h2>胡哲</h2> <p>1911年出生,.....</p> <p><input type="button" value="更多" class="more_btn" data-index="3"/></p> </div> </div> </div> //点击查看详情 <div class="box_content" style="display:none;"> <div class="intro_size"> <img src="" alt="" id="iamge"/> <h2 id="techname"></h2> <p id="content"></p> </div> </div> <script> $(function(){
//把要变换的数据放入数组里面 var sarr=new Array(); sarr.push(['img0.jpg','胡哲','1991年出生,在清华大学毕业......']); sarr.push(['img1.jpg','胡哲1','1991年出生,在清华大学毕业......']); sarr.push(['img2.jpg','胡哲2','1991年出生,在清华大学毕业......']); sarr.push(['img3.jpg','胡哲3','1991年出生,在清华大学毕业......']);
//点击详情变换数据 $('.more_btn').click(function(){ $('.box_content').show(); $('.list').hide(); var i=$(this).data('index'); $('#iamge').attr('src','sarr[i][0]'); $('#techname').html(sarr[i][1]); $('#content').html(sarr[i][2]); }) }) </script>