アイテムが表示された後にボタンを自動的に表示する方法

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"; 
     } 

事は、自動的にコードが動作するため、アクションが開始されていない限り、示さボタンdoesntの..

Answer 1

は、あなたがしている検討していることコンテンツが.tryy4の中にあるかどうかをチェックしてからsを確認する条件の中に#p4〜blockを設定します#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の少数のラインになり、そしてロジックのはるかに明白な「流れ」になります。 2次条件が満たされたときに2番目の要素のみを表示したいと仮定すると、valueの内部にその論理を入れ子にすることができます（あるいはAND（&&）を使用します）。あなたが（それ自体が奇妙である）あなたのボタンの<a>タグを使用している考慮

注意、あなたはまた、関数のパラメータとしてeを通過するとe.preventDefault()を呼び出すことにより、デフォルトのリンクの動作を防止する必要があります。

ホープ、このことができます:)

Answer 2

私は、私は完全にあなたの質問を理解していないと確信しているが、あなたが次たいようだ：Submitをクリックすると、それは「円形経路を」示すべきであるだけでなく、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/