我已經詳細的你可以如何去在下面的代碼實現這一點。你可以通過多種方式來做到這一點。在我的例子中，我決定將名稱換成描述，反之亦然，通過刪除元素並將其添加到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元素時處理名稱和描述之間的內容交換。爲了做到這一點，我們首先關閉被點擊的元素，然後基於一個類（在本例中爲「description」），我們將確定爲該元素顯示哪個視圖。
$(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 -->
你沒有你的描述添加到頁面 –
http://stackoverflow.com/questions/13553671 /倒裝兩之間的div- - 當單擊 - 上的-div的 –