使用動態內容的團隊頁面 - 需要幫助使用JQuery拉取圖片內容

Question

我在本示例中使用以下HTML/CSS和JQuery（http://codepen.io/jakestuts/pen/qIdkF/）創建團隊頁面，當您單擊團隊的頭像時會員，它會顯示有關該人的詳細信息，其中包括頭像，標題和生物的更大版本。

現在，它正在做的一切正常，除了拉小圖像選擇時顯示爲大圖像。

下面是截圖鏈接：https://goo.gl/photos/A57j7vxmGGUeSNjS8

我如何修改jQuery腳本和HTML，以確保顯示每個獨特的圖像選擇時？

**---------CSS---------** 
      <style type="text/css"> 

     /** page structure **/ 
     #w { 
      display: block; 
      margin: 0 auto; 
      width: 100%; 
      padding: 10px 25px; 
      background: #fff; 
      -webkit-border-radius: 4px; 
      -moz-border-radius: 4px; 
      border-radius: 4px; 
      -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3); 
      -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3); 
      box-shadow: 0 1px 1px rgba(0,0,0,0.3); 
     } 

     #teamcontent { 
      display: none; 
      margin-bottom: 15px; 
     } 


     #bigname { 
      padding: 0; 
      margin: 0; 
     } 

     #bigjob { 
      padding: 0; 
      margin: 0; 
     } 

     /** team member list **/ 
     .team { 
      display: block; 
     } 

     .team li { 
      display: block; 
      float: left; 
      margin-right: 20px; 
      margin-bottom: 20px; 
     } 
     .team li:hover { 
      cursor: pointer; 
     } 

     .team li.last { margin-right: 0; } 

     .team .hcontent { 
      display: none; 
     } 


     /** hidden team content **/ 
     #teamcontent .bigimg { 
      display: block; 
      float: left; 

     } 

     #teamdetails { 
      display: block; 
      float: left; 
      width: 100%; 
      padding-left: 0px; 
     } 


     /** clearfix **/ 
     .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } 
     .clearfix { display: inline-block; } 

     html[xmlns] .clearfix { display: block;} 
     * html .clearfix { height: 1%; } 

     </style> 


**---------HTML---------**   
     {% capture push_header %} 
      <div class="page push-header"> 
      <div class="container"> 
      {% include 'header-nav-links' %} 
       <div class="page-navigation"> 
       {% include 'breadcrumb' %} 
       </div> 

       <header class="page-header"> 
       <h2 class="page-title">{{ page.title }}</h2> 
       </header> 
      </div> 
      </div> 
     {% endcapture %} 

     <div class="page page-right-sidebar"> 
      <div class="container"> 
      <div class="inner"> 
       <section class="rte"> 
       {{ page.content }} 
     <div id="w"> 
      <h2>Our Advisory Team</h2> 
      <p>We've curated a trusted circle of passionate thought leaders in STEM (Science, Technology, Engineering and Mathematics) who are focused on world domination through STEM for the next generation. We leverage their expertise to influence how we approach our goal to drive change in elementary education.</p> 
      <p>Click any of the team member's photos to show more details.</p> 

      <div id="teamcontent" class="clearfix"> 
       <img id="replaceimg" src="http://i.imgur.com/TkSNOpF.jpg" class="bigimg" width="200" height="200"> 
       <div id="teamdetails"> 
       <h3 id="bigname">Name</h3> 
       <h4 id="bigjob">Title</h4> 
       <p id="bigdesc">A brief description.</p> 
       </div> 
      </div> 

      <ul class="team clearfix"> 
       <li> 
       <img src="//cdn.shopify.com/s/files/1/0814/0669/files/Adrienne-Scherenzel-Curry_large.png?4283374026768492253" alt="First Name Last Name" width="100" height="100" class="profilepic"> 
       <span class="hcontent job">Title, <a href="http://www.afterschoolmatters.org/">Organization</a></span> 
       <span class="hcontent desc"><strong style="color: #fc2a76;">Favorite Thing: Lorem Ipsum</strong><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at cursus enim. Cras malesuada diam erat, in tempus metus consectetur vitae. Suspendisse non semper est, euismod fermentum leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</span> 
       </li> 

       <li> 
       <img src="//cdn.shopify.com/s/files/1/0814/0669/files/Adi_copy_small.jpg?4039244052123859950" alt="Adi Hanash" width="100" height="100" class="profilepic"> 
       <span class="hcontent job">Senior instructional Designer,<a href="http://www.generalassemb.ly/"> General Assembly</a></span> 
       <span class="hcontent desc"><strong style="color: #fc2a76;">Favorite Thing: Prime Numbers</strong><br>Adi Hanash is a senior instructional designer at the EdTech startup General Assembly where he builds online training for GA's Enterprise partners, many of which are Fortune 500 companies. As an educator, Adi has worked as a teacher and tutor for over ten years. He specializes in math and science, having worked with students in everything from arithmetic to calculus and physics. He has taught and tutored students on a vast array of standardized tests including but not limited to the ISEE, SAT, ACT, GMAT, and GRE. He is particularly experienced in online education having developed both asynchronous and synchronous online courses in a variety of subjects. He has a BA from the University of Notre Dame and a MFA from ART/MXAT at Harvard University.</span> 
       </li> 

       <li> 
       <img src="//cdn.shopify.com/s/files/1/0814/0669/files/Desmond_copy_small.png?4039244052123859950" alt="Desmond Martin" width="100" height="100" class="profilepic"> 
       <span class="hcontent job">Founder, Martin's Tutoring Service</span> 
       <span class="hcontent desc"><strong style="color: #fc2a76;">Favorite Thing: Solving Puzzles </strong><br>Desmond Martin is the founder of Martin’s Tutoring Service, which currently serves to supplement math and engineering education for students in the Metropolitan Detroit area. Desmond has a Bachelor of Science in Mechanical Engineering from the University of Michigan in Ann Arbor. 
       <br><br> 
       As the founder of Martin’s Tutoring Service, Desmond has focused specifically on strengthening and expanding the foundational analytical and problem-solving skillsets of students. Desmond also currently serves as an Associate Minister at the Second Baptist Church of Ann Arbor where he preaches and teaches regularly. Desmond believes in the mission of transforming the paradigm of youth in such a way that fosters their identities as 「scholastic professionals.」</span> 
       </li> 

       <li> 
       <img src="//cdn.shopify.com/s/files/1/0814/0669/files/Brynn_small.png?4039244052123859950" alt="Brynn Pendrak" width="100" height="100" class="profilepic"> 
       <span class="hcontent job">STEM Coordinator, <a href="http://www.gcs.k12.nc.us/">Granville County Public Schools</a></span> 
       <span class="hcontent desc"><strong style="color: #fc2a76;">Favorite Thing: Lorem Ipsum </strong><br>Brynn Pendrak is the STEM Coordinator at Granville County Schools, where she supports two rural elementary schools and one middle school in the design, adoption, and implementation of a STEM program with an engineering focus, in addition to working on district-wide STEM trainings and initiatives. She previously was a Managing Director of Teacher Leadership Development for Teach for America Oklahoma, and began her career in education teaching bilingual second and third grade. She holds a Masters degree in Education Administration, Curriculum, and Supervision from the University of Oklahoma and BAs with distinction in Spanish and Political Science from the Ohio State University.</span> 
       </li> 

       <li> 
       <img src="//cdn.shopify.com/s/files/1/0814/0669/files/Jessica-C-Williams_large.png?4283374026768492253" alt="Jessica C. Williams" width="100" height="100" class="profilepic"> 
       <span class="hcontent job">University of Illinois, Chicago College of Dentistry Class of 2018</span> 
       <span class="hcontent desc"><strong style="color: #fc2a76;">Favorite Thing: Anatomy </strong><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at cursus enim. Cras malesuada diam erat, in tempus metus consectetur vitae. Suspendisse non semper est, euismod fermentum leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</span> 
       </li> 

      </ul> 

       </div> 

       </section> 

    **---------JavaScript---------** 

    $(function(){ 
     $('.profilepic').on('click', function(e){ 
     var $biginfo = $('#teamcontent'); 
     var $bigname = $('#bigname'); 
     var $bigjob = $('#bigjob'); 
     var $bigdesc = $('#bigdesc'); 

     var newname = $(this).attr('alt'); 
     var newrole = $(this).siblings('.job').eq(0).html(); 
     var newdesc = $(this).siblings('.desc').eq(0).html(); 

     $bigname.html(newname); 
     $bigjob.html(newrole); 
     $bigdesc.html(newdesc); 

     if($biginfo.css('display') == 'none') { 
      $biginfo.slideDown(350); 
     } 
     }); 
    }); 

Answer 1

我想這就是你要找的。

$(function(){ 
    $('.profilepic').on('click', function(e){ 
    var $biginfo = $('#teamcontent'); 
    var $bigname = $('#bigname'); 
    var $bigjob = $('#bigjob'); 
    var $bigdesc = $('#bigdesc'); 
    var $pic = $(this).attr('src'); 
    $('.bigimg').attr('src', $pic); 
    var newname = $(this).attr('alt'); 
    var newrole = $(this).siblings('.job').eq(0).html(); 
    var newdesc = $(this).siblings('.desc').eq(0).html(); 

    $bigname.html(newname); 
    $bigjob.html(newrole); 
    $bigdesc.html(newdesc); 

    if($biginfo.css('display') == 'none') { 
     $biginfo.slideDown(350); 
    } 
    }); 
});