Question

我的html中有一系列表单，目的是当用户点击“继续”按钮时，当前的一个消失，下一个显示。然而，我想知道是否有一种方法可以获得按下“继续”按钮（即，哪种形式），以便只有一段代码基本上检查并隐藏当前表单并显示下一个表格而不需要id's等。

我尝试了一些但没有工作，所以我不会在这里发布代码（老实说，它只是“破坏”了网站。

Answer 1

最简单的可能是给每个这样的“继续按钮”一个不同的id，这使得识别变得微不足道（例如，你可以让id成为与id连接的形式'_cnt'字符串{{1}}等）。但是如果你正在使用jquery，那么.parent()方法可以让你轻松地找到一个对象的“父”，所以在这种情况下，我建议只使用各自形式的子按钮。（如果你没有使用一些好的JS框架，比如流行的jquery，为了让你了解浏览器不兼容性＆amp; c，请考虑这样做......他们真的有用！ - ）。

Answer 2

如果你使用jQuery：

，这是相当轻而易举的事

$(function() {
   // Attach click handler to your buttons
   $("button, input[type=submit]").click(function(e) {
      e.preventDefault();
      // Hide the correct form
      var thisForm = $(this).parents("form").hide();
      // Show the form after this one
      thisForm.nextAll("form:first").show();
   });
});

这也将处理隐藏和显示表单。它假设您的按钮为<button>或<input type="submit">，并且您的表单元素位于同一父级内。

当然，如果您在页面的其他位置有按钮没有此行为，则需要在您感兴趣的按钮中添加formContinue等类，并更改代码中的第三行以上：

$("button.formContinue, input[type=submit].formContinue").click(function(e) {

Answer 3

对于每个输入元素，您都可以通过element.form获取父表单。从每个元素内部，您可以通过element.nextSibling找到下一个兄弟。

这是数学：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3436720</title>
        <script>
            function showNext(form) {
                var next = nextSibling(form, 'FORM');
                form.style.display = 'none';
                if (next) next.style.display = 'block';
            }
            function nextSibling(element, tagname) {
                var next = element.nextSibling;
                while (next && next.tagName != tagname) next = next.nextSibling;
                return next;
            }
        </script>
        <style>
            .hide { display: none; }
        </style>
    </head>
    <body>
        <form>Form 1<button onclick="showNext(this.form)">next</button></form>
        <form class="hide">Form 2<button onclick="showNext(this.form)">next</button></form>
        <form class="hide">Form 3<button onclick="showNext(this.form)">next</button></form>
        <form class="hide">Form 4<input type="submit"></form>
    </body>
</html>

您可能刚刚开始使用JavaScript。但我建议最终使用一个疯狂地简化DOM操作的JavaScript库，比如jQuery。以下是借助它的外观：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3436720 with jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('button.next').click(function() {
                    $(this).closest('form').hide().next('form').show();
                });
            });
        </script>
        <style>
            .hide { display: none; }
        </style>
    </head>
    <body>
        <form>Form 1<button class="next">next</button></form>
        <form class="hide">Form 2<button class="next">next</button></form>
        <form class="hide">Form 3<button class="next">next</button></form>
        <form class="hide">Form 4<input type="submit"></form>
    </body>
</html>

找出被点击的项目属于哪个表单

3 个答案: