如何在點擊時刪除div並顯示另一個div

Question

一旦用戶單擊文本輸入並刪除顯示的div，我想顯示一個隱藏的div，但是如果用戶再次單擊文本輸入，我不希望剛剛刪除的div再次顯示。

到目前為止，我已經嘗試過了：

<div id="div1"> Have to be remove on click</div>

<div id="div2">Hidden on page load and show on click</div>

<input type="text" id="input" placeholder="click here" />

。

$(function(){
    $("#div2").hide();
    $("#div1").show();
    $("#input").on("click", function(){

      $(" #div2").toggle();

    });

});

Answer 1

我認為下面的代碼片段可以解決您的問題，如果有幫助，請告訴我！

 $(function(){ $("#div2").hide(); $("#div1").show(); $("#input").on("click", function(){ $("#div1").hide(); $(" #div2").show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div1"> Have to be remove on click</div> <div id="div2">Hidden on page load and show on click</div> <input type="text" id="input" placeholder="click here" /> 

Answer 2

我想在用戶單擊文本輸入並刪除顯示的div后顯示一個隱藏的div

將focus事件添加到input

$("#input").on("focus", function() {
  $("#div1").remove(); //div1 is removed
  $(" #div2").show(); //hidden div is shown
});

$("#input").on("blur", function() {
  $(" #div2").hide(); //div2 is hidden again
});

演示

 $("#input").on("focus", function() { $("#div1").remove(); //div1 is removed $(" #div2").show(); //hidden div is shown }); $("#input").on("blur", function() { $(" #div2").hide(); //div2 is hidden again }); 

 #div2 { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div1"> Have to be remove on click</div> <div id="div2">Hidden on page load and show on click</div> <input type="text" id="input" placeholder="click here" /> 

Answer 3

$(document).ready(function(){ 
$("#input").click(function(){
      $("#div1").toggle();
    }); 
});

不要做兩個按鈕，一個用於隱藏 ，另一個用於顯示 。 制作一個按鈕並使用toggle（） 。 現在，這就是您所需要的...肯定可以。

閱讀此內容將對您有所幫助https://www.javatpoint.com/jquery-toggle

:)