私はあなたが以下のコードでこれをやって行くことができる方法を詳細にしました。あなたはこれを行うことについて行くことができる複数の方法があります。私の例では、DOMに要素を追加したり削除したりすることで、記述の名前を入れ替えることにしました。 、1は名前のビューを作成するために、他方は
// 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>")
};
次は、我々は、フォームのハンドラは、フィールドのすべての詳細をつかむために提出する変更の説明ビューを作成するには：
まず、私は2つの機能を作成しますそれをオブジェクトとして格納し、次のエントリのフィールドをクリアします。この関数は、要素をページに追加します。
// 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 -->
ページにあなたの説明を追加しませんでした –
http://stackoverflow.com/questionsを実行できるようになります完全なコードです/ 13553671/flip-between-two-divs-when-divsをクリックすると –