1

In this code, could you please explain why the first alert shows the correct fieldset's id when the Maintenance button is clicked and the second alert shows the correct fieldset's id when the Subfile maint button is clicked, but not the other way round?

<div>
 <table width="100%">
  <col width="25%" />
  <col width="75%" />
  <tr>
   <td>
    <div class="width300"><h1>Inandrias Software&#174;</h1></div>
   </td>
   <td>
    <div class="nopadormarg" style="white-space:nowrap;">
     <h1><font size=+1>You are logged in as </font>charlie<font size=+1> of New Enterprises (Pty) Ltd.</font></h1>
    </div>
   </td>
  </tr>
 </table>

 <div id="menudiv" class="nopadormarg">

    <a href="#" class="menuA" name="level01"><span>Maintenance</span></a>
      <fieldset id="Maintenance" class="menuAbuttons">
        <p>
          <a href="#" class="menuA" name="level02" title="Maintain ancilliary files"><span>Subfile maint</span></a>
            <fieldset id="Subfilemaint" class="menuAbuttons">
              <p>
                <a href="#" class="menuA" name="level03" title="Add, amend, delete (unused) Products"><span>Products</span></a>
              </p>
              <p>
                <a href="#" class="menuA" name="level03" title="Add, amend, delete (unused) Insurers"><span>Insurers</span></a>
              </p>
              <p>
                <a href="#" class="menuA" name="level03" title="Add, amend, delete (unused) Section types"><span>Section types</span></a>
              </p>
              <p>
                <a href="#" class="menuA" name="level03" title="Add, amend, delete (unused) Agents"><span>Agents</span></a>
              </p>
              <p>
                <a href="#" class="menuA" name="level03" title="Add, amend, delete (unused) Pay methods"><span>Pay methods</span></a>
              </p>
            </fieldset>
        </p>
      </fieldset>

 </div>
</div>

​ JS:

$(document).ready(function() {
    $(".menuA").click(function(evnt) {
        evnt.preventDefault();

        alert("next fieldset id = " + $(this).next('fieldset').attr('id'));
        alert("next fieldset id = " + 
$(this).closest('fieldset').find(".menuAbuttons:first").attr('id'));


    // remove the menuA-open class from the current and lower (numerically higher) level's
    //   class menuA objects except the one being clicked (toggled)
    var level = $(this).attr('name');
    // trying to avoid higher levels with >= doesn't seem to work
    //   nor does "[name = " + level + "][name > " + level + "]"
    $(".menuA").not(this).filter("[name = " + level + "]").removeClass("menuA-open");
    //this removes all menuA-open classes except the currently clicked one
    //$(".menuA").not(this).removeClass("menuA-open");

    // hide all other fieldset objects except the one being toggled
    $('fieldset').not($(this).next('fieldset')).hide();

    // toggle the fieldset following this link open or closed
    $("fieldset#" + $(this).text().replace(/\s+/gi,'')).toggle();

    // toggle the currently selected menuA-open class on or off
    $(this).toggleClass("menuA-open");

    });
});

​</p>

4

0 回答 0