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();
    }); 
});

不要制作两个按钮，一个用于隐藏，另一个用于显示。点击一个按钮并使用切换（）。现在这就是你所需要的......这肯定会奏效。

阅读本文它会对你有所帮助 https://www.javatpoint.com/jquery-toggle

：）

如何在点击时删除div并显示另一个div

3 个答案: