使用jquery

Question

有人可以帮助我从我点击的段落中获取firstName和lastName的值，这样我就可以在另一个div中显示它们。我只是设法从我点击的段落中获取整个文本，但我需要firstName和LastName的值。以下是我需要帮助的评论代码。提前谢谢。

function Contact(first, last) {
  this.firstName = first;
  this.lastName = last;
}


$(document).ready(function() {
  let a_contacts = [];

  $("#delBtn").click(function() {
    $("li").remove();
  });

  $("#save").click(function() {
    event.preventDefault()

    var inputtedFirstName = $("input#new-first-name").val();
    var inputtedLastName = $("input#new-last-name").val();
    var newContact = new Contact(inputtedFirstName, inputtedLastName);
    $("ul#contacts").append("<li class='contact'>" + "<p class='para' >" + 'First Name: ' + newContact.firstName + ' Last Name: ' + newContact.lastName + "</p>" + "<button class='btn del'>del</button>" + "</li>");

    a_contacts.push(newContact);

    $("input#new-first-name").val("");
    $("input#new-last-name").val("");
  });



  // $('#contacts').on('click', 'p', function (e) {


  //     $("#show-contact").show();
  //     $("#show-contact h2").text(newContact.firstName);
  //     $(".first-name").text(newContact.firstName);
  //     $(".last-name").text(newContact.lastName);


  // });

  $('#contacts').on('click', '.del', function(event) {
    $(event.target).parent().remove()
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1 id="haha">Address book</h1>

  <div class="row">
    <div class="col-md-6">
      <h2>Add a contact:</h2>

      <form id="new-contact">
        <!-- form -->
        <div class="form-group">
          <label for="new-first-name">First name</label>
          <input type="text" class="form-control" id="new-first-name">
        </div>
        <div class="form-group">
          <label for="new-last-name">Last name</label>
          <input type="text" class="form-control" id="new-last-name">
        </div>

        <button id="delBtn" class="btn">Add</button>
        <button id="save" class="btn">Save</button>
      </form>
      <!-- form -->

      <h2>Contacts:</h2>
      <ul id="contacts">

      </ul>
    </div>
    <div class="col-md-6">
      <div id="show-contact">
        <h2></h2>

        <p>First name: <span class="first-name"></span></p>
        <p>Last name: <span class="last-name"></span></p>
      </div>
    </div>
  </div>
</div>

Answer 1

使用function Contact(first, last) { this.firstName = first; this.lastName = last; } $(document).ready(function() { $(document).on('click', '.para',function(){ var fn = $(this).find('.fn').text(); var ln = $(this).find('.ln').text(); $('#show-contact').append('<p>First name: <span class="first-name">'+fn+'</span></p><p>Last name: <span class="last-name">'+ln+'</span></p>'); // Add //$('#show-contact').html('<p>First name: <span class="first-name">'+fn+'</span></p><p>Last name: <span class="last-name">'+ln+'</span></p>'); // update //console.log("first name is: " + fn + " last name is: " + ln); }); let a_contacts = []; $("#delBtn").click(function() { $("li").remove(); }); $("#save").click(function() { event.preventDefault() var inputtedFirstName = $("input#new-first-name").val(); var inputtedLastName = $("input#new-last-name").val(); var newContact = new Contact(inputtedFirstName, inputtedLastName); $("ul#contacts").append("<li class='contact'>" + "<p class='para' >" + 'First Name: <a class="fn">' + newContact.firstName + '</a> Last Name: <a class="ln">' + newContact.lastName + "</a></p>" + "<button class='btn del'>del</button>" + "</li>"); a_contacts.push(newContact); $("input#new-first-name").val(""); $("input#new-last-name").val(""); }); // $('#contacts').on('click', 'p', function (e) { // $("#show-contact").show(); // $("#show-contact h2").text(newContact.firstName); // $(".first-name").text(newContact.firstName); // $(".last-name").text(newContact.lastName); // }); $('#contacts').on('click', '.del', function(event) { $(event.target).parent().remove() }); });标记（或其他）包装firstName和lastName，并使用此标记将其覆盖：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1 id="haha">Address book</h1>

  <div class="row">
    <div class="col-md-6">
      <h2>Add a contact:</h2>

      <form id="new-contact">
        <!-- form -->
        <div class="form-group">
          <label for="new-first-name">First name</label>
          <input type="text" class="form-control" id="new-first-name">
        </div>
        <div class="form-group">
          <label for="new-last-name">Last name</label>
          <input type="text" class="form-control" id="new-last-name">
        </div>

        <button id="delBtn" class="btn">Add</button>
        <button id="save" class="btn">Save</button>
      </form>
      <!-- form -->

      <h2>Contacts:</h2>
      <ul id="contacts">

      </ul>
    </div>
    <div class="col-md-6">
      <div id="show-contact">
        <h2></h2>


      </div>
    </div>
  </div>
</div>

{{1}}

Answer 2

您可以使用正则表达式执行此操作。

function Contact(first, last) {
  this.firstName = first;
  this.lastName = last;
}


$(document).ready(function() {
  let a_contacts = [];

  $("#delBtn").click(function() {
    $("li").remove();
  });

  $("#save").click(function() {
    event.preventDefault()

    var inputtedFirstName = $("input#new-first-name").val();
    var inputtedLastName = $("input#new-last-name").val();
    var newContact = new Contact(inputtedFirstName, inputtedLastName);
    $("ul#contacts").append("<li class='contact'>" + "<p class='para' >" + 'First Name: ' + newContact.firstName + ' Last Name: ' + newContact.lastName + "</p>" + "<button class='btn del'>del</button>" + "</li>");

    a_contacts.push(newContact);

    $("input#new-first-name").val("");
    $("input#new-last-name").val("");
  });

   $("#show-contact").hide();

   $('#contacts').on('click', 'p', function (e) {
       var name = $(this).html();
       var fname = name.match(/(?<=First Name: ).*?(?= Last)/);
       var lname = name.match(/(?<=Last Name: ).*$/);
       $("#show-contact").show();
       $("#show-contact .first-name").html(fname);
       $("#show-contact .last-name").html(lname);
   });

  $('#contacts').on('click', '.del', function(event) {
    $(event.target).parent().remove()
  });

});

#contacts>li:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1 id="haha">Address book</h1>

  <div class="row">
    <div class="col-md-6">
      <h2>Add a contact:</h2>

      <form id="new-contact">
        <!-- form -->
        <div class="form-group">
          <label for="new-first-name">First name</label>
          <input type="text" class="form-control" id="new-first-name">
        </div>
        <div class="form-group">
          <label for="new-last-name">Last name</label>
          <input type="text" class="form-control" id="new-last-name">
        </div>

        <button id="delBtn" class="btn">Add</button>
        <button id="save" class="btn">Save</button>
      </form>
      <!-- form -->

      <h2>Contacts:</h2>
      <ul id="contacts">

      </ul>
    </div>
    <div class="col-md-6">
      <div id="show-contact">
        <h2></h2>

        <p>First name: <span class="first-name"></span></p>
        <p>Last name: <span class="last-name"></span></p>
      </div>
    </div>
  </div>
</div>

Answer 3

一种可能的解决方案是使用firstname提取lastname和substr，如下所示。

function Contact(first, last) {
  this.firstName = first;
  this.lastName = last;
}


$(document).ready(function() {
  let a_contacts = [];

  $("#delBtn").click(function() {
    $("li").remove();
  });

  $("#save").click(function() {
    event.preventDefault()

    var inputtedFirstName = $("input#new-first-name").val();
    var inputtedLastName = $("input#new-last-name").val();
    var newContact = new Contact(inputtedFirstName, inputtedLastName);
    $("ul#contacts").append("<li class='contact'>" + "<p class='para' >" + 'First Name: ' + newContact.firstName + ' Last Name: ' + newContact.lastName + "</p>" + "<button class='btn del'>del</button>" + "</li>");

    a_contacts.push(newContact);

    $("input#new-first-name").val("");
    $("input#new-last-name").val("");
  });

   $('#contacts').on('click', 'p', function (e) {
       // Get current para's text
       var txt = $(this).text();
       
       // pre-define labels present in the text
       var fnameLabel = 'First Name: ';
       var lnameLabel = 'Last Name: ';
       
       // define length of the labels
       var fnameLabelLen = fnameLabel.length;
       var lnameLabelLen = lnameLabel.length;

       // define Index positions of the labels
       var fnameLabelIdx = txt.indexOf(fnameLabel);
       var lnameLabelIdx = txt.indexOf(lnameLabel);
 
       // Get First Name value by calculating the Index position
       // between labels first name and last name
       var firstName = txt.substr(fnameLabelIdx+fnameLabelLen, lnameLabelIdx-fnameLabelLen);
      
      // Get Last Name by calculating Index positions
      // between lastname label and end of para
      var lastName = txt.substr(lnameLabelIdx+lnameLabelLen, txt.length-lnameLabelLen);
      
       $("#show-contact").show();
       $("#show-contact h2").text(firstName);
       $(".first-name").text(firstName);
       $(".last-name").text(lastName);
   });

  $('#contacts').on('click', '.del', function(event) {
    $(event.target).parent().remove()
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1 id="haha">Address book</h1>

  <div class="row">
    <div class="col-md-6">
      <h2>Add a contact:</h2>

      <form id="new-contact">
        <!-- form -->
        <div class="form-group">
          <label for="new-first-name">First name</label>
          <input type="text" class="form-control" id="new-first-name">
        </div>
        <div class="form-group">
          <label for="new-last-name">Last name</label>
          <input type="text" class="form-control" id="new-last-name">
        </div>

        <button id="delBtn" class="btn">Add</button>
        <button id="save" class="btn">Save</button>
      </form>
      <!-- form -->

      <h2>Contacts:</h2>
      <ul id="contacts">

      </ul>
    </div>
    <div class="col-md-6">
      <div id="show-contact">
        <h2></h2>

        <p>First name: <span class="first-name"></span></p>
        <p>Last name: <span class="last-name"></span></p>
      </div>
    </div>
  </div>
</div>