这是我的代码，我正在创建按钮点击输入块。我想显示输入框中输入的详细信息，即姓名和工作电子邮件/工作电话。 在按钮点击（显示）我想显示它。目前，我正在创建名字和姓氏数组，然后显示它们。我怎样才能做同样的工作电话和工作电子邮件。如何区分用户是否输入了电子邮件id或电话号码。 有人能帮忙吗？

类似以下内容:

如果用户有enterd电子邮件id 当时的名称：ABC DEF电子邮件：“email-id” 否则为--name：ABC DEF phone：“phone-number”

顺晟科技：

考虑以下事项。

您不必使用HTML模板，但对于这种用例来说，它可能是一个很好的选择。它只是让它更容易看到HTML。另外，您希望避免在任何模板中使用ID，因为它们对于每个元素都必须是唯一的。在这种情况下，如果创建两个或多个，则它们的属性ID将不再唯一。

使用样式来帮助显示、隐藏或定义外观和感觉是一种更好的做法。为此，我使用了类。这可以从联系方式的选择中看出。用户进行选择，两者都隐藏，并且根据用户的选择只显示一个。

可以考虑用单选按钮替换选择。当只有少数几个唯一的选择选项时，它更常用。

一旦详细信息被填满，您就需要一个Get和Show类型的函数。作为最佳实践，我将所有事件回调都移到jQuery中。

由于您使用的是jQuery，因此可以检测通过以下方式选择的输入:

let firstarr = [];
let lastarr = [];

function addpoc() {
  let el = '';
  el += '<div class="contactIp"><div><div class="name"><label for="fname">First name:</label><br><input type="text" class="fname" name="fname" placeholder="Ricky"></div><div class="name"><label for="lname">Last name:</label><br><input type="text" class="lname" name="lname" placeholder="Ju"></div></div><div class="parent" style="width: 100%;"><div id="one"><select id="contact method" onchange="showMail(this)"><option disabled selected>Prefered contact method</option><option value="workmail">Work email </option><option value="workphone">Work Phone</option></select></div><div class="two" id="two" style="display: none;"><input class="mailvalue" type="email" name="workemail" placeholder="Work email"></div><div class="three" id="three" style="display: none;"><input class="mailvalue" type="email" name="workphone" placeholder="Work Phone"></div></div><br><br></div>'

  $('.addelement').append(el);
}

function contine() {
  for (var i = 0; i < $(".fname").length; i++) {
    if ($(".fname:eq(" + i + ")").val() != undefined) {
      firstarr.push($(".fname:eq(" + i + ")").val())
    }
    if ($(".lname:eq(" + i + ")").val() != undefined) {
      lastarr.push($(".lname:eq(" + i + ")").val())
    }

    //--------how to find phone/mail?
  }
  for (let i = 0; i < firstarr.length; i++) {
    document.getElementById("contact").innerHTML += 'Name:' + firstarr[i] + " " + lastarr[i] + '<br>';

  }

}

function showMail(selecteop) {
  if (selecteop.value == "workmail") {
    $(selecteop).closest(".parent").find(".two").show();
    $(selecteop).closest(".parent").find(".three").hide();

  } else {
    $(selecteop).closest(".parent").find(".three").show();
    $(selecteop).closest(".parent").find(".two").hide();

  }
}

提供:

1，如果选择了电子邮件

2，如果选择了电话

所以，首先定义目标:

let firstarr = [];
let lastarr = [];

function addpoc() {
  let el = '';
  el += '<div class="contactIp"><div><div class="name"><label for="fname">First name:</label><br><input type="text" class="fname" name="fname" placeholder="Ricky"></div><div class="name"><label for="lname">Last name:</label><br><input type="text" class="lname" name="lname" placeholder="Ju"></div></div><div class="parent" style="width: 100%;"><div id="one"><select id="contact method" onchange="showMail(this)"><option disabled selected>Prefered contact method</option><option value="workmail">Work email </option><option value="workphone">Work Phone</option></select></div><div class="two" id="two" style="display: none;"><input class="mailvalue" type="email" name="workemail" placeholder="Work email"></div><div class="three" id="three" style="display: none;"><input class="mailvalue" type="email" name="workphone" placeholder="Work Phone"></div></div><br><br></div>'

  $('.addelement').append(el);
}

function contine() {
  for (var i = 0; i < $(".fname").length; i++) {
    if ($(".fname:eq(" + i + ")").val() != undefined) {
      firstarr.push($(".fname:eq(" + i + ")").val())
    }
    if ($(".lname:eq(" + i + ")").val() != undefined) {
      lastarr.push($(".lname:eq(" + i + ")").val())
    }

    //--------how to find phone/mail?
  }
  for (let i = 0; i < firstarr.length; i++) {
    document.getElementById("contact").innerHTML += 'Name:' + firstarr[i] + " " + lastarr[i] + '<br>';

  }

}

function showMail(selecteop) {
  if (selecteop.value == "workmail") {
    $(selecteop).closest(".parent").find(".two").show();
    $(selecteop).closest(".parent").find(".three").hide();

  } else {
    $(selecteop).closest(".parent").find(".three").show();
    $(selecteop).closest(".parent").find(".two").hide();

  }
}

ps。使用as object只是保持代码干净的一个想法，您也可以使用三进制运算符。