javascript - 如何使代码更高效、更短?
问题描述
我正在编写一个代码,用户可以在其中按下五个按钮之一,单击后这些按钮将被禁用。然后它应该计算每次按下并将其存储在 Firestore 数据库中,并且数字显示在按钮上。我还没有完全管理计数(尝试了 Firestore 增量),但这是另一个问题。我是 JavaScript 的相对论新手,但我设法显示了投票数,但代码太长且效率低下。这是我的按钮代码:
<ul>
<li class="circleProgressVote"> <!-- Bruker enkle svar slik at knappene ikke trenger å være så store-->
<button class="btn white black-text voteBtn" id="btn1" style="border-radius: 50%; height: 75px; width: 125px; font-size: 10px;" onclick="vote1(); disableButton();"> <span id="svar1"> Svært dårlig </span> </button>
</li>
<li class="circleProgressVote">
<button class="btn white black-text voteBtn" id="btn2" style="border-radius: 50%; height: 75px; width: 125px; font-size: 10px;" onclick="vote2(); disableButton();"> Dårlig </button>
</li>
<li class="circleProgressVote">
<button class="btn white black-text voteBtn" id="btn3" style="border-radius: 50%; height: 75px; width: 125px; font-size: 10px;" onclick="vote3(); disableButton();"> Usikker </button>
</li>
<li class="circleProgressVote">
<button class="btn white black-text voteBtn" id="btn4" style="border-radius: 50%; height: 75px; width: 125px; font-size: 10px;" onclick="vote4(); disableButton();"> Bra </button>
</li>
<li class="circleProgressVote">
<button class="btn white black-text voteBtn" id="btn5" style="border-radius: 50%; height: 75px; width: 125px; font-size: 10px;" onclick="vote5(); disableButton();"> Svært bra </button>
</li>
</ul>
为了显示投票数我给了每个按钮各自的功能,但代码基本相同。关键是无论您按哪个按钮,投票数都会出现在每个按钮上。所以我为每个函数做了这个,其中主要是firestore增量代码和最后一行(设置所选按钮周围的边框)不同:
function vote1() {
console.log('ans1');
const db = firebase.firestore();
const increment = firebase.firestore.FieldValue.increment(1);
const storyRef = db.collection('spørsmål').doc().collection('valg1');
storyRef.update({ reads: increment });
db.collection('spørsmål').get().then((snapshot) => {
snapshot.docs.forEach(doc => {
hentSvar1(doc);
});
});
function hentSvar1(doc) {
let div1 = document.createElement('div');
let votes1 = document.createElement('span');
let span1 = document.createElement('span');
div1.setAttribute('data-id', doc.id);
votes1.textContent = doc.data().valg1;
span1.textContent = ' stemmer';
div1.appendChild(votes1);
div1.appendChild(span1);
let div2 = document.createElement('div');
let votes2 = document.createElement('span');
let span2 = document.createElement('span');
div2.setAttribute('data-id', doc.id);
votes2.textContent = doc.data().valg2;
span2.textContent = ' stemmer';
div2.appendChild(votes2);
div2.appendChild(span2);
let div3 = document.createElement('div');
let votes3 = document.createElement('span');
let span3 = document.createElement('span');
div3.setAttribute('data-id', doc.id);
votes3.textContent = doc.data().valg3;
span3.textContent = ' stemmer';
div3.appendChild(votes3);
div3.appendChild(span3);
let div4 = document.createElement('div');
let votes4 = document.createElement('span');
let span4 = document.createElement('span');
div4.setAttribute('data-id', doc.id);
votes4.textContent = doc.data().valg4;
span4.textContent = ' stemmer';
div4.appendChild(votes4);
div4.appendChild(span4);
let div5 = document.createElement('div');
let votes5 = document.createElement('span');
let span5 = document.createElement('span');
div5.setAttribute('data-id', doc.id);
votes5.textContent = doc.data().valg5;
span5.textContent = 'stemmer';
div5.appendChild(votes5);
div5.appendChild(span5);
svar1.appendChild(div1);
svar2.appendChild(div2);
svar3.appendChild(div3);
svar4.appendChild(div4);
svar5.appendChild(div5);
document.getElementById('btn1').style.border = '2px solid red';
};
};
我知道拥有五个几乎相似的功能太长且效率低下,但我不知道如何使它更简单。
解决方案
做一个这样的函数:
function appendDiv(svar, doc) {
let div = document.createElement('div');
let votes = document.createElement('span');
let span = document.createElement('span');
div.setAttribute('data-id', doc.id);
votes.textContent = doc.data().valg1;
span.textContent = ' stemmer';
div.appendChild(votes);
div.appendChild(span);
svar.appendChild(div);
}
并这样称呼它:
appendDiv(svar1, doc);
appendDiv(svar2, doc);
appendDiv(svar3, doc);
appendDiv(svar4, doc);
appendDiv(svar5, doc);
推荐阅读
- python - 拆分数组并将第一部分添加到末尾
- excel - 在 VBA 中合并多行
- php - Wordpress admin-ajax.php 400 加载失败
- java - 试图通过 Android 中通过 Firebase 填充的两个 ArrayList
- sql - 获取postgresql中时间冲突的列
- python - 如何从python中的列表字符串列表中删除一个元素,该元素是另一个元素的子字符串?
- hadoop - 未使用 Dataproc 辅助工作器
- sql - 加入 2 个表并获取记录
- javascript - 如何在 javascript 中使用 find() 函数获取元素?
- google-sheets - 使用带数组公式的大函数