我正在我的投资组合项目中工作，为此我为我的电话号码字段制作了一个国际国家代码选择程序。但我现在面临的问题是我的主页上有两个表单一个是咨询表单另一个是Contact Form，我想使用相同的JS程序窗体.
我不想一次又一次地重写相同类型的程序或函数，因为这会对我的网站的性能产生负面影响。但另一方面，我不知道如何为两个表单重用相同的代码。当我试图重用该函数时，它会发生冲突。
我有一个工作下拉菜单Contact Form，我也想实现相同的逻辑咨询表单
请帮我解决这个问题。
// Cache the elements
const ccDiv = document.querySelector(".contact-frm-cc");
const ccButton = document.querySelector(".cc-telcode");
const ccContainer = document.querySelector(".cc-container");
const ccSearchInput = document.querySelector(".cc-search-box");
const ccList = document.querySelector(".cc-data-list");
var selectedCountry = ""; // saved by "code"
// Add event listeners to the button, input, and list
// We use a process called "event delegation" on the list
// to catch events from its children as they "bubble up" the DOM
// https://dmitripavlutin.com/javascript-event-delegation/
ccButton.addEventListener("click", handleButton);
ccSearchInput.addEventListener("input", handleInput);
ccList.addEventListener("click", handleListClick);
document.addEventListener("click", handleDocumentClick);
// All of the data held as objects within an array
const data = [
{ name: "Afganistan", code: "93", flag: "afg" },
{ name: "Albania", code: "355", flag: "alb" },
{ name: "Algeria", code: "213", flag: "dza" },
{ name: "American Samoa", code: "1-684", flag: "asm" },
{ name: "Andorra", code: "376", flag: "and" },
{ name: "Angola", code: "244", flag: "ago" },
{ name: "Anguilla", code: "1-264", flag: "aia" },
{ name: "Antarctica", code: "672", flag: "ata" },
{ name: "Antigua and Barbuda", code: "1-268", flag: "atg" },
{ name: "Argentina", code: "54", flag: "arg" },
{ name: "Armenia", code: "374", flag: "arm" },
{ name: "Aruba", code: "297", flag: "abw" },
{ name: "Australia", code: "61", flag: "aus" },
{ name: "Austria", code: "43", flag: "aut" },
{ name: "Azerbaijan", code: "994", flag: "aze" },
{ name: "Bahamas", code: "1-242", flag: "bhs" },
{ name: "Bahrain", code: "973", flag: "bhr" },
{ name: "Bangladesh", code: "880", flag: "bgd" },
{ name: "Barbados", code: "1-246", flag: "brb" },
{ name: "Belarus", code: "375", flag: "blr" },
{ name: "Belgium", code: "32", flag: "bel" },
{ name: "Belize", code: "501", flag: "blz" },
{ name: "Benin", code: "229", flag: "ben" },
{ name: "Bermuda", code: "1-441", flag: "bmu" },
{ name: "Bhutan", code: "975", flag: "btn" },
{ name: "Bolivia", code: "591", flag: "bol" },
{ name: "Bosnia and Herzegovina", code: "387", flag: "bih" },
{ name: "Botswana", code: "267", flag: "bwa" },
{ name: "Brazil", code: "55", flag: "bra" },
{ name: "British Indian Ocean Territory", code: "246", flag: "iot" },
{ name: "British Virgin Islands", code: "1-284", flag: "vgb" },
{ name: "Brunei", code: "673", flag: "brn" },
{ name: "Bulgaria", code: "359", flag: "bgr" },
{ name: "Burkina Faso", code: "226", flag: "bfa" },
{ name: "Burundi", code: "257", flag: "bdi" },
{ name: "Cambodia", code: "855", flag: "khm" },
{ name: "Cameroon", code: "237", flag: "cmr" },
{ name: "Canada", code: "1", flag: "can" },
{ name: "Cape Verde", code: "238", flag: "cpv" },
{ name: "Cayman Islands", code: "1-345", flag: "cym" },
{ name: "Central African Republic", code: "236", flag: "caf" },
{ name: "Chad", code: "235", flag: "tcd" },
{ name: "Chile", code: "56", flag: "chl" },
{ name: "China", code: "86", flag: "chn" },
{ name: "Christmas Island", code: "61", flag: "cxr" },
{ name: "Cocos Islands", code: "61", flag: "cck" },
{ name: "Colombia", code: "57", flag: "col" },
{ name: "Comoros", code: "269", flag: "com" },
{ name: "Cook Islands", code: "682", flag: "cok" },
{ name: "Costa Rica", code: "506", flag: "cri" },
{ name: "Croatia", code: "385", flag: "hrv" },
//------- MORE COUNTRIES TO ADD LATER
];
// Handles the document click - it checks to see if the clicked
// part of the document has a parent element which is either
// `null` or is the HTML element, and then closes the container
// if it's open
function handleDocumentClick(e) {
const { parentElement } = e.target;
document.addEventListener("click", (event) => {
if (!ccDiv.contains(event.target)) {
ccContainer.classList.remove("show-cc-list");
}
});
}
// Filters the data based on the characters
// at the start of the provided name
function filterData(data, value) {
return data.filter((obj) => {
return (
obj.name.toLowerCase().startsWith(value.toLowerCase()) ||
obj.code.toLowerCase().startsWith(value.toLowerCase())
);
});
}
// Create a series of list items based on the
// data passed to it
function createListHtml(data) {
return data.map((obj) => {
const { name, code, flag } = obj;
let isSelected = "";
if (obj.code == selectedCountry) isSelected = "selected-country";
return `
<li class="cc-list-items ${isSelected}" data-name="${name}" data-code="${code}" data-flag="${flag}">
<div class="flag-icon flag-icon-${flag}"></div>
<div class="name">${name} (+${code})</div>
</li>
`;
}).join("");
}
// Toggle the container on/off
function handleButton() {
ccContainer.classList.toggle("show-cc-list");
ccList.innerHTML = createListHtml(data);
}
// No data available list item
function createNoDataHtml() {
return '<li class="nodata">No data available</li>';
}
// When the input is changed filter the data
// according to the current value, and then
// create some list items using that filtered data
function handleInput(e) {
const { value } = e.target;
if (value) {
const filtered = filterData(data, value);
if (filtered.length) {
ccList.innerHTML = createListHtml(filtered);
} else {
ccList.innerHTML = createNoDataHtml();
}
} else {
ccList.innerHTML = createListHtml(data);
}
}
// Create some button HTML
function createButtonHtml(code, flag) {
return `
<div class="flag-icon flag-icon-${flag}"></div>
<option class="cc-code" value="+${code}">+${code}</option>
`;
}
// When an item is clicked, grab the relevant data
// attributes, create the new button HTML, and then
// close the container
function handleListClick(e) {
const item = e.target.closest("li") || e.target;
if (item.classList.contains("cc-list-items")) {
const { code, flag } = item.dataset;
selectedCountry = item.dataset.code;
ccButton.innerHTML = createButtonHtml(code, flag);
ccContainer.classList.remove("show-cc-list");
}
}.cc-telcode {
margin-bottom: 1em;
display: flex;
justify-content: center;
width: 100%;
}
.cc-telcode div.cc-code,
.cc-list-items div.name {
margin-left: 0.25em;
}
.cc-container {
display: none;
width: 300px;
position: absolute;
}
.show-cc-list {
display: block;
z-index: +999;
}
.cc-data-list {
max-height: 100px;
list-style: none;
margin: 1em 0 0 0;
padding: 0;
overflow-y: scroll;
border: 1px soldi darkgray;
}
.cc-list-items {
display: flex;
padding: 0.25em;
border: 1px solid lightgray;
}
.cc-list-items:hover {
cursor: pointer;
background-color: lightyellow;
}
.selected-country {
cursor: pointer;
background-color: rgb(73, 118, 241);
}
.contact-frm-cc {
width:100px;
}<link rel="stylesheet" href="https://amitdutta.co.in/flag/css/flag-icon.css">
<!------------- Working Dropdown Menu ------------>
<div class="contact-frm-cc">
<button class="cc-telcode">Tel code</button>
<section class="cc-container">
<input type="text" class="cc-search-box" placeholder="Search for country" />
<ul class="cc-data-list">
</ul>
</section>
</div>
<!------------- Not-Working Dropdown Menu ------------>
<!--
<div class="consult-frm-cc">
<button class="cc-telcode">Tel code</button>
<section class="cc-container">
<input type="text" class="cc-search-box" placeholder="Search for country" />
<ul class="cc-data-list">
</ul>
</section>
</div>
-->您可以创建一个函数来注册您的表单逻辑，并且只需传递您的根表单元素。
这里是一个基于你的代码的简单修改
<!-- https://codepen.io/DlmaK/pen/dyjXYrm -->