Jquery 在标题中显示特定数据

我正在创建一个小网站，允许用户浏览一些莎士比亚戏剧。我的工作原理是，当用户单击某个剧本时，该剧的名称显示在标题中，剧本的脚本显示在单独的div中

这是很好的工作，但我现在正试图组织到下拉菜单中的各种发挥。我将这些戏剧分为两类（喜剧和历史），并将它们进行了相应的分组

我现在遇到的问题是，一旦我通过下拉菜单单击某个剧本，该类别（即喜剧）中的整个剧本列表就会显示在标题中，而不仅仅是我选择的剧本。但是，我选择的播放仍然正确地显示在显示该播放的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>

莎士比亚戏剧

---

发生这种情况是因为您将

单击

事件绑定到所有

li

项，包括下拉列表标题。您可以更改选择器以使其可用

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

当然，代码中还有许多其他问题

您应该改进元素的ID（例如，您有几个ID为

help

的元素，应该只有一个）

列表元素

ul

应仅包含作为第一个孩子的

li

元素（您还有

br

元素，不正确）

请注意，

标题中有两个
span
元素。如果您想用文本填充它，请考虑只使用一个（参见JavaScript）。