0

私は、ユーザーがシェイクスピアの戯曲のいくつかを閲覧できる小さなウェブサイトを作成しています。ユーザーが演劇をクリックすると、演劇の名前がヘッダーに表示され、演劇のスクリプトが別の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>
4

1 に答える 1

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. List要素ulには、最初の子要素としてのみ含める必要がありますli（要素もありますがbr、正しくありません）。
  3. 注意してください。には2つのspan要素がありheaderます。テキストで埋めたい場合は、1つだけを使用することを検討してください（JavaScriptを参照）。
于 2012-05-13T00:03:24.907 に答える