特定のデータをヘッダーに表示する

Question

私は、ユーザーがシェイクスピアの演劇の一部を閲覧できるようにする小さなウェブサイトを作成しています。ユーザーが演奏をクリックすると、演奏の名前がヘッダーに表示され、演奏のスクリプトが別のdivに表示されます。

これはうまくいきましたが、私は現在、さまざまな演劇をドロップダウンメニューに整理しようとしています。私は演劇を2つのカテゴリー（コメディとヒストリー）に分け、それに応じて演劇をグループ分けしました。

私が今問題になっているのは、ドロップダウンメニューから再生をクリックすると、その娯楽（つまりコメディ）内の再生リスト全体が、選択した再生だけでなくヘッダーに表示されるということです。しかし、私が選んだ演奏は、演奏を表示するdivに正しく表示されます（ 'mainOutput' div）。

基本的に私が知る必要があるのは、ドロップダウンメニューを設定して、選択したプレイのタイトルのみをヘッダーに表示する方法です。うまくいけば、私はこれを正しく説明しており、どんな助けもありがとう！ここに私のコードが表示されるためにプレーを開始しjqueryのは...

です：

$(document).ready(function(){ /* The code here can be modified to allow for any means of obtaining playName */ 
    $('li').click(function(event) { 
    var playName = $(this).attr("id"); 
     $("header>span").text($(this).text()); 
     loadPlay(playName); 
    });   

ドロップダウンメニュー：

プレイデータが表示されている

<div style="margin-left:50px;"> 
    <ul id="menu"> 
     <li><a href="#">Comedies</a> 
      <ul id="help"> 
       <li> 
        <img class="corner_inset_left" alt="" src="corner_inset_left.png"/> 
        <li id="all_well.xml" class="comedy">All's Well That Ends Well</li> 
        <img class="corner_inset_right" alt="" src="corner_inset_right.png"/> 
       </li> 
       </ br> 
       <li id="as_you.xml" class="comedy">As You Like It</li> </ br> 
       <li id="com_err.xml" class="comedy">The Comedy of Errors</li> </ br> 
       <li id="cymbelin.xml" class="comedy">Cymbeline</li> </ br> 
       <li id="lll.xml" class="comedy">Love's Labours Lost</li> 
       <li id="m_for_m.xml" class="comedy">Measure for Measure</li> 
          <li class="last"> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Histories</a> 
      <ul id="help"> 
       <li> 
        <img class="corner_inset_left" alt="" src="corner_inset_left.png"/> 
        <li id="hen_iv_1.xml" class="history">Henry IV, Part I</li>                  <img class="corner_inset_right" alt="" src="corner_inset_right.png"/> 
       </li> 
      <li id="hen_iv_2.xml" class="history">Henry IV, Part II</li> 
      <li id="hen_v.xml" class="history">Henry V</li> 
      <li id="hen_vi_1.xml" class="history">Henry VI, Part I</li> 
      <li id="rich_iii.xml" class="history">Richard III</li> 
       <li class="last"> 
       </li> 
      </ul> 
     </li> 
     </div> 

：

<header><span>Shakespeare's Plays<span></span></span></header> 

Answer 1

これは、clickイベントをすべてliアイテムに追加します（ドロップダウンリストの見出しを含む）。セレクタを変更して有効にすることができます。

$(document).ready(function() { 
    $('#menu ul li').click(function(event) { 
     var playName = $(this).attr("id"); 
     $("header > span").text($(this).text()); 
     loadPlay(playName); 
    }); 
}); 

もちろん、コードには他にも多くの問題があります。

1. 要素のIDを改善する必要があります（たとえば、IDがhelpの複数の要素が1つのみである必要があります）。
2. リスト要素ulは、最初の子要素としてli要素のみを含む必要があります（br要素もあります）。
3. spanの要素が2つあります。headerです。テキストで入力する場合は、1つだけを使用することを検討してください（JavaScriptを参照）。