使用 jQuery 从单击的段落中获取值

Question

有人可以帮我从我单击的段落中获取名字和姓氏的值，以便我可以在另一个div中显示它们。我只设法从我单击的段落中获取了整个文本，但我需要名字和姓氏的值。 下面是我需要帮助的注释代码。提前谢谢。

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

用anchor标签(或等(包装名字和姓氏，并用这个标签结束它：

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

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

Answer 2

一种可能的解决方案是使用substr提取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) {
       // 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>

Answer 3

你可以用正则表达式来做到这一点。

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>