0

我正在创建一个允许用户浏览莎士比亚戏剧的小型网站。我的工作原理是，当用户单击播放时，播放的名称显示在标题中，播放的脚本显示在单独的 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>
4

1 回答 1

1

This happens because you bind click event to all li items, including your dropdown list headings. You can change the selector to make it workable.

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

Of course, there are many other problems in your code.

  1. You should improve IDs of the elements (e.g. you have several elements with ID help, should be only one).
  2. List element ul should contain as first childs li elements only (you also have br elements, not correct).
  3. Pay attention, you have two span elements in header. Consider using only one if you wish to fill it with text (see JavaScript).
于 2012-05-13T00:03:24.907 回答