我在下面的代码中详细介绍了如何执行此操作。有多种方法可以做到这一点。在我的示例中，我决定在单击时通过从 DOM 中删除和添加元素来交换描述的名称，反之亦然。
首先我创建了两个函数：一个创建名称视图，另一个创建描述视图
// Generates view for name
var getNameView = function(user) {
return $("<div class='person'><div><h4>" + user.first_name + " " + user.last_name + "</h4><p>Click for more details</p></div></div>")
};
// Generates view for description
var getDescriptionView = function(user) {
return $("<div class='person'><div><h4>" + user.description + " " + "</h4><p>Click to go back</p></div></div>")
};
接下来我们更改表单提交的处理程序以获取所有字段的详细信息，将其存储为对象并清除字段以供下一个条目。此函数还将元素添加到页面中。
// Listen for form submit
$('form').submit(function() {
// Stores details of user being added
var user = {
first_name: $('#first_name').val(),
last_name: $('#last_name').val(),
description: $("#description").val()
};
// Add user to list of users
users.push(user);
// Append name view for user
$('#contact_card').append(getNameView(user))
// Clear fields
$("#first_name").val("")
$("#last_name").val("")
$("#description").val("")
return false
});
最后，我们需要在点击 person 元素时处理名称和描述之间的内容交换。为此，我们将首先关闭被点击的元素，然后根据一个类（在本例中为“描述”），我们将确定为该元素显示哪个视图。
$(document).on('click', '.person', function(){
// Store a reference to the element for the person clicked on
var $person = $(this)
// Hide the contents of the person element before swapping views
$person.children().slideUp('slow', function() {
// Determine whether we should show the description.
// We'll use a class on the person element to determine this.
if ($person.hasClass("description")) {
$person.removeClass("description");
$person.html(getNameView(users[$person.index()]).children())
$person.children().slideDown('slow');
}
else {
$person.addClass("description");
$person.html(getDescriptionView(users[$person.index()]).children())
$person.children().slideDown('slow');
}
});
});
这是您可以运行的完整代码
<!DOCTYPE html>
<html>
<head>
<title>Advanced jQuery Assignment III: Contact Card</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
// Used to keep track of users being added
// stores details of user as object
var users = [];
// Generates view for name
var getNameView = function(user) {
return $("<div class='person'><div><h4>" + user.first_name + " " + user.last_name + "</h4><p>Click for more details</p></div></div>")
};
// Generates view for description
var getDescriptionView = function(user) {
return $("<div class='person'><div><h4>" + user.description + " " + "</h4><p>Click to go back</p></div></div>")
};
// Listen for form submit
$('form').submit(function() {
// Stores details of user being added
var user = {
first_name: $('#first_name').val(),
last_name: $('#last_name').val(),
description: $("#description").val()
};
// Add user to list of users
users.push(user);
// Append name view for user
$('#contact_card').append(getNameView(user))
// Clear fields
$("#first_name").val("")
$("#last_name").val("")
$("#description").val("")
return false
});
$(document).on('click', '.person', function(){
// Store a reference to the element for the person clicked on
var $person = $(this)
// Hide the contents of the person element before swapping views
$person.children().slideUp('slow', function() {
// Determine whether we should show the description.
// We'll use a class on the person element to determine this.
if ($person.hasClass("description")) {
$person.removeClass("description");
$person.html(getNameView(users[$person.index()]).children())
$person.children().slideDown('slow');
}
else {
$person.addClass("description");
$person.html(getDescriptionView(users[$person.index()]).children())
$person.children().slideDown('slow');
}
});
});
});
</script>
<style>
* {
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;
margin: 1rem 0;
}
</style>
</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" placeholder="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 -->