Question

我正在开发一个项目，用户输入名字，姓氏和简要说明。点击提交按钮后，名字和姓氏将转移到下面的新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 -->

Answer 1

然后将描述添加到隐藏contact_card中的p。然后，当您点击课程person时，只需切换p个孩子。

＆＃13;

$(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');
  });

});

＆＃13;

* {
  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;
}

＆＃13;

<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 -->

＆＃13;

Answer 2

我已经在下面的代码中详细介绍了如何执行此操作。有多种方法可以做到这一点。在我的例子中，我决定将名称换成描述，反之亦然，点击后删除元素并从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元素时处理名称和描述之间的内容交换。为此，我们将首先关闭被单击的元素，然后基于类（在本例中为＃34; description＆＃34;），我们将确定要为该元素显示的视图。

        $(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 -->

使用jQuery将联系信息添加到新div

2 个答案: