我正在开发一个元素，用户可以在其中输入名字、姓氏和简短描述。点击提交按钮后，名字和姓氏将转移到下面的新 div 中。如果您单击名字和姓氏，新的 div 将翻转并显示用户为自己写的描述。如果用户单击描述，卡片将翻回名字和姓氏。 点击提交按钮后，我可以获得要转移的名字和姓氏。但是，我很难让带有名字和姓氏的卡片翻转并显示描述信息并翻转回名字和姓氏。如有任何建议，我们将不胜感激。
$(document).ready(function() {
alert('jQuery activated');
$('form').submit(function() {
alert('form submitted');
$('#contact_card').append("<div class='person'><h4>" + $('#first_name').val() + " " + $('#last_name').val() + "</h4><p>Click for more details</p></div>");
return false;
});
$(document).on('click', '.person', function() {
alert('user clicked');
$(this).children().toggle('slow');
});
});* {
font-family: "Tahoma";
margin: 0px;
padding: 0px;
}
#container {
width: 1000px;
height: 750px;
margin: 0px auto;
}
#left,
form {
display: inline-block;
max-width: 500px;
}
#left form h3 {
margin: 0px 0px 13px 0px;
}
.person {
border: 8px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title>Advanced jQuery Assignment III: Contact Card</title>
</head>
<body>
<div id="container">
<div id="left">
<form>
<br>First Name:
<input class="user_input" type="text" id="first_name">
<br>
<br>Last Name:
<input class="user_input" type="text" id="last_name">
<br>
<label for="description"></label>
<textarea name="description" type="text" id="description" cols="50" rows="10">Enter Description</textarea>
<br>
<input type="submit" value="Add User">
</form>
</div>
<!-- end of left -->
<div id="bottom">
<div id="contact_card">
</div>
<!-- end of contact_card -->
</div>
<!-- end of bottom -->
</div>
<!-- end of container -->最佳答案
因此在隐藏的p 中将描述添加到contact_card。然后，当您单击类 person 时，只需切换 p 子级即可。
$(document).ready(function() {
$('form').submit(function() {
$('#contact_card').append("<div class='person'><h4>" + $('#first_name').val() + " " + $('#last_name').val() + "</h4><p>Click for more details</p><p hidden>"+$('#description').val()+"</p></div>");
return false;
});
$(document).on('click', '.person', function() {
$(this).children('p').toggle('slow');
});
});* {
font-family: "Tahoma";
margin: 0px;
padding: 0px;
}
#container {
width: 1000px;
height: 750px;
margin: 0px auto;
}
#left,
form {
display: inline-block;
max-width: 500px;
}
#left form h3 {
margin: 0px 0px 13px 0px;
}
.person {
border: 8px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title>Advanced jQuery Assignment III: Contact Card</title>
</head>
<body>
<div id="container">
<div id="left">
<form>
<br>First Name:
<input class="user_input" type="text" id="first_name">
<br>
<br>Last Name:
<input class="user_input" type="text" id="last_name">
<br>
<label for="description"></label>
<textarea name="description" type="text" id="description" cols="50" rows="10">Enter Description</textarea>
<br>
<input type="submit" value="Add User">
</form>
</div>
<!-- end of left -->
<div id="bottom">
<div id="contact_card">
</div>
<!-- end of contact_card -->
</div>
<!-- end of bottom -->
</div>
<!-- end of container -->关于jquery - 使用 jQuery 将联系信息添加到新的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39665259/