更改多個div的內容

Question

我希望能夠在按下按鈕時更改兩個div內的內容。當玩家的名字被選中時，一個div需要更新他們的生物，而下一個div是他們的照片。此刻一旦按鈕被選中，它將相同的內容加載到兩個div中。

<section id="container"> 
    <div id="playerMenu"> 
     <nav> 
      <h3>Select a Player</h3> 
       <ul> 
        <li><a href="adnan" >Adnan Januzaj</a></li> 
        <li><a href="movie-2">Movie 2</a></li> 
        <li><a href="movie-3">Movie 3</a></li> 
       </ul> 
     </nav> 
    </div> 


    <article class="playerPic"> 
     <section id="picture"> 
       <div id="adnan1"> 
         <img src="images/januzaj.png"/> 
       </div> 
    </article> 


     <div class="playerBio"> 
      <section id="content"> 
       <div id="adnan"> 
        <p>  Bio about Adnan Januzaj Here</p> 
       </div> 
     </div> 

      </section> 
     </section> 
</section> 

    <script type="text/javascript" charset="utf-8"> 
     $(document).ready(function(){ 

      $('#playerMenu ul li a').click(function(){ 
       $('#content').load('players.html #' + $(this).attr('href')); 
       return false; 
      }); 

      $('#playerMenu ul li a').click(function(){ 
       $('#picture').load('players.html #' + $(this).attr('href')); 
       return false; 
      }); 

     }); 
    </script> 

我打電話從一個單獨的HTML文件名爲players.html的信息和圖片

<div id="adnan"> 
<h2>Adnan Januzaj</h2> 
<p>Bio about Adnan Januzaj Here</p> 


<div id="adnan1"> 
<img src="images/januzaj.png"/> 
</div> 
</div> 


<div id="movie-2"> 
<h2>Phil Jones</h2> 
    <img src="images/jones.jpg"/> 
<p>Bio about Phil Jones Here.</p> 
</div> 

這是可能的嗎？我知道如何改變一個div的內容，但是通過選擇一個按鈕可以改變2 div的內容嗎？一個導航按鈕是否可以包含多個href？

謝謝！

Answer 1

你忘了在你的JavaScript的href標記後添加1。

的JavaScript

$('#playerMenu ul li a').click(function(){ 

    $('#content').load('players.html #' + $(this).attr('href')); 
    $('#picture').load('players.html #' + $(this).attr('href') + '1'); /* added the 1 */ 

    return false; 
    }); 

我給你的div更加清晰的ID，如「阿德南 - 生物」和「阿德南-PIC」，當你呼叫負載這些追加到每個HREF。

Answer 2

你可以把兩者發生在同一事件偵聽器：

$('#playerMenu ul li a').click(function(){ 
    $('#content').load('players.html #' + $(this).attr('href')); 
    $('#picture').load('players.html #' + $(this).attr('href')); 

    return false; 
    });