触发容器onclick

时间：2016-10-29 15:02:16

标签： javascript jquery

我需要重写以下代码，以便当您点击按钮＆＃34; next＆＃34;或者什么，下一个容器打开，当前容器关闭。按钮＆＃34;返回＆＃34;同样适用。

不幸的是，我并不确切知道如何重写代码以获得想要的结果，因为我的偏好在后端最为明显，而且我对JavaScript和jQuery仍然很陌生。

这是我目前的代码：

    $(document).ready(function() {
        $('.trigger').not('.trigger_active').next('.toggle_container').hide();
        $('.trigger').click(function() {
            var trig = $(this);

            if(trig.hasClass('trigger_active')) {
                trig.next('.toggle_container').slideToggle(500);
                trig.removeClass('trigger_active');
            } else {
                $('.trigger_active').next('.toggle_container').slideToggle(500);
                $('.trigger_active').removeClass('trigger_active');
                trig.next('.toggle_container').slideToggle(500);
                trig.addClass('trigger_active');
            };
        return false;
        });
    });

上课：

    <div class="trigger">
        <table width="385px" cellspacing="5px" style="border: 1px solid #FFFFFF;">
            <tr>
                <th align="left">User Information</th>
                <th align="right"><font size="1">(click to expand)</font></th>
            </tr>
        </table>
    </div>
    <div class="toggle_container">
        <table width="385px" cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF;">
            <tr>
                <td align="left">Username<font color="#8E6516">*</font></td>
                <td align="right"><input name="username" id="username" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Benutzername" required="required" /></td>
            </tr>
            <tr>
                <td align="left">Password<font color="#8E6516">*</font></td>
                <td align="right"><input name="password" id="password" type="password" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Mindestens 6 Zeichen" required="required" /></td>
            </tr>
            <tr>
                <td align="left">Password<font color="#8E6516">*</font></td>
                <td align="right"><input name="confirmpwd" id="confirmpwd" type="password" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Passwort wiederholen" required="required" /></td>
            </tr>
            <tr>
                <td align="left">E-Mail<font color="#8E6516">*</font></td>
                <td align="right"><input name="email" id="email" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="E-Mail Adresse" required="required" /></td>
            </tr>
            <tr>
                <td align="left"><input name="back" type="button" value="Back" style="background: transparent; border-color: #8E6516; color: #FFFFFF; width: 135px;" /></td>
                <td align="right"><input type="button" name="next" value="Next" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" /></td>
            </tr>
        </table>
    </div>

1 个答案:

答案 0 :(得分：0)

根据我的理解，您希望显示多个表，但一次只能显示一个表。这是一个基于jQuery的解决方案。

我创建了几个表并添加了css类：

  • .trigger-next和.trigger-back to＆＃34; Back＆＃34;和＆＃34;下一步＆＃34;链接
  • 。隐藏在开头隐藏表格。

然后，在每一个＆＃34; Back＆＃34;或＆＃34;下一个＆＃34;单击，代码解析表并决定要显示或隐藏的内容。

＆＃13;
＆＃13; 
$(document).ready(function() {
  var next = true;

  function displayOtherScreen(elem, direction) {
    if(next && !$(elem).hasClass("trigger_active")) {
      next = false;
      $(elem).addClass("trigger_active").slideToggle(500);
    } else if($(elem).hasClass("trigger_active")) {
      next = true;
      $(elem).removeClass("trigger_active").slideToggle(500);
    }
  }

      
  $('.trigger').click(function() {
    // click on "(click to expand)" link or "Next" links
    if($(this).hasClass("trigger-next")) {
      $('.toggle_container').each(function(elem){ 
        displayOtherScreen(this, "next");
      });
    }
    // click on "Back" links
    else {
     // read ".toggle_container" elements backwards
      $($(".toggle_container").get().reverse()).each(function(){ 
        displayOtherScreen(this, "back");
      }); 
    }
  });
});
＆＃13; 
.hidden {
      display: none;
    }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <div class="trigger trigger-next">
    <table width="385px" cellspacing="5px" style="border: 1px solid #FFFFFF;">
      <tr>
        <th align="left">User Information</th>
        <th align="right"><font size="1">(click to expand)</font></th>
      </tr>
    </table>
  </div>
  <div class="toggle_container trigger_active">
    <table width="385px" cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF;">
      <tr>
        <td align="left">Username<font color="#8E6516">*</font></td>
        <td align="right"><input name="username" id="username" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Benutzername" required="required" /></td>
      </tr>
      <tr>
        <td align="left">Password<font color="#8E6516">*</font></td>
        <td align="right"><input name="password" id="password" type="password" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Mindestens 6 Zeichen" required="required" /></td>
      </tr>
      <tr>
        <td align="left">Password<font color="#8E6516">*</font></td>
        <td align="right"><input name="confirmpwd" id="confirmpwd" type="password" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Passwort wiederholen" required="required" /></td>
      </tr>
      <tr>
        <td align="left">E-Mail<font color="#8E6516">*</font></td>
        <td align="right"><input name="email" id="email" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="E-Mail Adresse" required="required" /></td>
      </tr>
      <tr>
        <td></td>
        <td align="right" class="trigger trigger-next"><input type="button" name="next" value="Next" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" /></td>
      </tr>
    </table>
  </div>
    <div class="toggle_container hidden">
      <table width="385px" cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF;">
        <tr>
          <td align="left">2nd screen<font color="#8E6516">*</font></td>
          <td align="right"><input name="username" id="username" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Benutzername" required="required" /></td>
        </tr>
        <tr>
          <td align="left">Password<font color="#8E6516">*</font></td>
          <td align="right"><input name="password" id="password" type="password" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Mindestens 6 Zeichen" required="required" /></td>
        </tr>
        <tr>
          <td align="left">Password<font color="#8E6516">*</font></td>
          <td align="right"><input name="confirmpwd" id="confirmpwd" type="password" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Passwort wiederholen" required="required" /></td>
        </tr>
        <tr>
          <td align="left">E-Mail<font color="#8E6516">*</font></td>
          <td align="right"><input name="email" id="email" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="E-Mail Adresse" required="required" /></td>
        </tr>
        <tr>
          <td align="left" class="trigger trigger-back"><input name="back" type="button" value="Back" style="background: transparent; border-color: #8E6516; color: #AAA; width: 135px;" /></td>
          <td align="right" class="trigger trigger-next"><input type="button" name="next" value="Next" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" /></td>
        </tr>
      </table>
    </div>
    <div class="toggle_container hidden">
      <table width="385px" cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF;">
        <tr>
          <td align="left">3rd screen<font color="#8E6516">*</font></td>
          <td align="right"><input name="username" id="username" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Benutzername" required="required" /></td>
        </tr>
        <tr>
          <td align="left">Password<font color="#8E6516">*</font></td>
          <td align="right"><input name="password" id="password" type="password" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Mindestens 6 Zeichen" required="required" /></td>
        </tr>
        <tr>
          <td align="left">Password<font color="#8E6516">*</font></td>
          <td align="right"><input name="confirmpwd" id="confirmpwd" type="password" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Passwort wiederholen" required="required" /></td>
        </tr>
        <tr>
          <td align="left">E-Mail<font color="#8E6516">*</font></td>
          <td align="right"><input name="email" id="email" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="E-Mail Adresse" required="required" /></td>
        </tr>
        <tr>
          <td align="left" class="trigger trigger-back"><input name="back" type="button" value="Back" style="background: transparent; border-color: #8E6516; color: #AAA; width: 135px;" /></td>
          <td align="right" class="trigger trigger-next"><input type="button" name="next" value="Next" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" /></td>
        </tr>
      </table>
    </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

编辑：我用第一个表上的.trigger_active类替换.hidden类：这样第一个表首先可见并处于活动状态。我相应地修改了函数displayOtherScreen中的条件。

我还删除了＆＃34; Back＆＃34;第一个表中的按钮，否则，单击时会显示最后一个表。但是你真的需要再次添加它。

希望此解决方案符合您的需求。

相关问题
最新问题