更改多個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>

我從一個名為players.html的單獨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

您可以將兩個更改放在同一個事件偵聽器中：

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

    return false;
  });

Answer 2

你忘了在你的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，例如“adnan-bio”和“adnan-pic”，並在調用load時將它們附加到每個href。