Question

我有一个页面，当我做一个小任务学习时，它不起作用。问题是，

我创建了一个输入框和一个按钮，也是一个div，用于显示输入框中输入的文本。当我输入一些文本并点击按钮时，它正在工作。

这意味着文本显示在一个小div中。当我输入另一个文本并按下按钮时，div正在重新启动。我想要一个重复的div，它应该来自第一个的下面。我列出了下面的jsfiddle。

JQuery代码

$(window).ready(function () {
    $(".result-box").hide();

});

$("#button4").click(function () {

    $(".result-box").show();

    $(".result-box").animate({
        top: '12%',
        left: '8%'
    });

    var vof = $("#box1").val();
    $(".result-box").text(vof);

    $("#button4").val("Next");
});

Js Fiddle

Answer 1

$(".result-box").animate({
    top:'12%',
    left:'8%'
});

var vof=$("#box1").val();
$(".result-box").append("<div>" + vof + "</div>");

$("#button4").val("Next");

Answer 2

请参阅更新的小提琴：

https://jsfiddle.net/0Lb1cgty/4/

具体来说，我已经改变它，以便#rbx是一个容器，每次都会附加一个新的div，并动画，如下所示：

$("#button4").click(function(){
  var newDiv = $("<div>", { class: "result-box"});
  newDiv.animate({
    top:'12%',
    left:'8%'
  });
  var vof=$("#box1").val();
  newDiv.text(vof);
  newDiv.appendTo($("#rbx"));
  $("#button4").val("Next");
});

Answer 3

其他答案告诉您在.result-box div中添加新的div。虽然这有效，但您必须更新您的CSS以反映它。

使用当前的css，您可以简单地添加一个容器div（.result-boxes）并将.result-box div添加到其中。

<div class="result-boxes"></div>

$("#button4").click(function() {

var vof = $("#box1").val();

$(".result-boxes").append("<div class='result-box'>" + vof + "</div>").animate({
  top: '12%',
  left: '8%'
});

$("#button4").val("Next");

}）;

JSFiddle

Answer 4

HTML

<div class="small-box">
<input type="text" id="box1" placeholder="Enter the value ?">
<input type="button" name="button"  value="Click Me !"id="button4"> </input>
<div id="append"></div>

jQuery

$(window).ready(function(){
$(".result-box").hide();

});


$("#button4").click(function(){

var vof=$("#box1").val();
$("#append").append('<div class="result-box" id="rbx">'+vof+'</div>');

$("#button4").val("Next");

$(".result-box").show();

$(".result-box").animate({

top:'12%',
left:'8%'
});
});

Fiddle

Answer 5

你可以使用一个虚拟div，它将一直保持隐藏状态，用户将输入的第二，第三或第n次你可以在这个虚拟div中填充它然后将它附加到你的主div。像这样的事情!!

 [ModifiedDate]  DATETIME         DEFAULT (getdate()) NOT NULL,

var click_made = 0;
$(window).ready(function(){
$(".result-box").hide();

});


$("#button4").click(function(){



$(".result-box").show();

$(".result-box").animate({

top:'12%',
left:'8%'


});

var vof=$("#box1").val();
if(!click_made){
$(".result-box").text(vof);
}else{
$(".dummy_div").find(".result-box").text(vof);
$(".main_container").append($(".dummy_div").html());
}

$("#button4").val("Next");
click_made = 1;




});

.small-box{
position:relative;
left:30%;
top:30%;
width:400px;
height:400px;
padding:30px;
border:5px solid #404040;
background:#f2f2f2;

}
.result-box{
position:relative;
left:9%;
top:10%;
border:3px solid #404040;
padding:10px;

font-family:verdana;
color:#fff;
width:80%;
background:#4d4d4d;


}

Answer 6

你可以这样做：

$(window).ready(function(){
$(".result-container").hide();
});
$("#button4").click(function(){
var vof=$("#box1").val();
var newDiv ='<div class="result-box">'+vof+'</div>';
$(".result-container").append(newDiv);
$(".result-container").show();
$("#button4").val("Next");
});

.small-box{
position:relative;
left:30%;
top:30%;
width:400px;
height:400px;
padding:30px;
border:5px solid #404040;
background:#f2f2f2;

}
.result-box{
position:relative;
left:9%;
top:10%;
border:3px solid #404040;
padding:10px;

font-family:verdana;
color:#fff;
width:80%;
background:#4d4d4d;


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="small-box">
<input type="text" id="box1" placeholder="Enter the value ?" />
<input type="button" name="button"  value="Click Me !"id="button4" /> 

<div class="result-container">
</div>
</div>

当点击一个按钮时，所有文本都显示在同一个div上，我想要它有所不同

6 个答案: