Question

所以点击一个按钮，我会显示一些东西，我想检查是否显示了该项目，但我还有其他类似的条件，在按钮可以自动显示之前也是如此。

HTML：

<input type="text" class="form-control tryy4" id="idNumber1" name="num1" 
                                                   required 
                                                   data-error="Value is required">

//when button is pressed, item with id="p4" will be displayed. same goes to the p5 item.

<a href="" class="btn btn-success" id="submit4" style="float: right">Submit</a>
<p style="color: blue; display: none" id="p4">circular path</p>

<input type="text" class="form-control tryy5" id="idNumber1" name="num1" 
                                           required 
                                           data-error="Value is required">
<a href="" class="btn btn-success" id="submit5" style="float: right">Submit</a>
<p style="color: blue; display: none" id="p5">142 μm(acceptable range..)</p>

//this is the button that will be shown automatically after item with id="p4" is shown

<a href='' style='margin-left: 83vw; display: none' id="nextsect" class="btn btn-primary">Next Section</a>

使用Javascript：

    //code to show item p4 on button click:

    $("#submit4").click(function () {
            var value = $(".tryy4").val();
            if (value !== "") {
                document.getElementById('p4').style.display = "block";
            }
        });

    $("#submit5").click(function () {
        var value = $(".tryy5").val();
        if (value !== "") {
            document.getElementById('p5').style.display = "block";
        }
    });

    //code to show another button automatically after p4 is shown 

    var isVisible = document.getElementById("p4").style.display === "block";
        if (isVisible === true) {
            document.getElementById("nextsect").style.display = "block";
        }

问题是按钮不会自动显示，除非因为代码有效而启动了一个动作..

Answer 1

我不确定我是否完全理解您的问题，但似乎您需要以下内容：当您单击提交时，它应显示“循环路径”div以及“下一部分”按钮，而不是提交表单/转到下一页。

要完成此任务，您可以执行以下操作：

添加e.preventDefault()以停止提交表单。
移动逻辑以将nextsect显示到事件处理程序中。

示例：

$("#submit4").click(function(e) {
  e.preventDefault();
  var value = $(".tryy4").val();
  if (value !== "") {
    document.getElementById('p4').style.display = "block";
    document.getElementById("nextsect").style.display = "block";
  }
});

如果有帮助，请告诉我！

https://jsfiddle.net/jkp8dbom/2/

Answer 2

考虑到您在条件内设置#p4至block，检查.tryy4内是否有内容，然后只检查#p4是否已更改，为什么不简单地改变同一条件内的两个元素的显示？

$("#submit4").click(function(e) {
  e.preventDefault();
  var value = $(".tryy4").val();
  if (value !== "") {
    document.getElementById('p4').style.display = "block";
    /* Some other condition */
    if (1 === 1) {
      document.getElementById("nextsect").style.display = "block";
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control tryy4" id="idNumber1" name="num1" required data-error="Value is required">
<a href="" class="btn btn-success" id="submit4" style="float: right">Submit</a>
<p style="color: blue; display: none" id="p4">circular path</p>
<a href='' style='margin-left: 83vw; display: none' id="nextsect" class="btn btn-primary">Next Section</a>

这会减少JavaScript的行数，并使逻辑的“流程”更加明显。假设您只想在满足次要条件时显示第二个元素，您可以将该逻辑嵌套在value检查内（或者，使用AND（&&））。

请注意，考虑到您为按钮使用<a>标记（本身很奇怪），您还需要通过e作为函数来阻止默认链接行为参数并调用 e.preventDefault() 。

希望这会有所帮助：）

如何在项目显示后自动显示按钮

2 个答案: