JavaScript
$("#answer_a_btn").click(function() {
selectAnswer("#answer_a_btn");
deselectAnswer("#answer_b_btn");
deselectAnswer("#answer_c_btn");
deselectAnswer("#answer_d_btn");
});
$("#answer_b_btn").click(function() {
deselectAnswer("#answer_a_btn");
selectAnswer("#answer_b_btn");
deselectAnswer("#answer_c_btn");
deselectAnswer("#answer_d_btn");
});
$("#answer_c_btn").click(function() {
deselectAnswer("#answer_a_btn");
deselectAnswer("#answer_b_btn");
selectAnswer("#answer_c_btn");
deselectAnswer("#answer_d_btn");
});
$("#answer_d_btn").click(function() {
deselectAnswer("#answer_a_btn");
deselectAnswer("#answer_b_btn");
deselectAnswer("#answer_c_btn");
selectAnswer("#answer_d_btn");
});
因为我有超过 4 个按钮答案,所以如何才能使其更加动态?
function selectOnlyOneExamButton(examButtonId, examButtonsIds) {
for(var i = 0; i < examButtonsIds.length; i++)
{
if(examButtonsIds[i] == examButtonId)
{
console.log("SELECTED ANSWER " + examButtonsIds[i]);
selectAnswer(examButtonsIds[i]);
}
else {
console.log("DESELECTED ANSWER " + examButtonsIds[i]);
deselectAnswer(examButtonsIds[i]);
}
}
};
de-/selectAnswer() 只改变当前取消/选择按钮的颜色
我不知道为什么这不起作用。
每次我点击另一个按钮或同一个按钮时,他都会打印出相同的按钮 ID...
var examButtonsIds = [];
var examButtonId = "";
for(var i = 0; i < zwischenpruefungen[1].exams.length; i++)
{
currentExam = zwischenpruefungen[1].exams[i];
console.log(i);
if(i % 2 == 0)
{
examscreen.appendChild(row);
}
var p = document.createElement("p");
p.className = "col-md-6";
var button = document.createElement("button");
button.id = "exam-" + currentExam.season + "-" + currentExam.year + "-btn";
button.className = "exam exam-btn btn btn-secondary btn-lg btn-block";
examButtonId = button.getAttribute("id");
button.addEventListener("click", function() {
console.log("SELECT ONE EXAM BUTTON CLICKED");
selectAnswer(this);
$.each(".exam-btn").not(this).each(function() {
deselectAnswer(this);
});
});
var span = document.createElement("span");
span.className = Object.keys(currentExam)[1];
span.textContent = currentExam["season-de"] + " ";
var span2 = document.createElement("span");
span2.className = Object.keys(currentExam)[3];
span2.textContent = currentExam.year;
row.appendChild(p);
p.appendChild(button);
button.appendChild(span);
button.appendChild(span2);
examButtonsIds[i] = button.getAttribute("id");
}
我在 for 循环中执行了以下操作,结果是,我从 jquery.min.js 收到错误,并且如果我单击了两者,按钮将保持单击的颜色。
button.addEventListener("click", function() {
selectAnswer(this);
$(".answer-" + letter.toLowerCase() + "-btn").not(this).each(function() {
deselectAnswer(this);
});
console.log(this.id);
});
button.addEventListener("click", function() {
selectAnswer(this);
$(".answer-a-btn").not(this).each(function() {
deselectAnswer(this);
});
$(".answer-b-btn").not(this).each(function() {
deselectAnswer(this);
});
$(".answer-c-btn").not(this).each(function() {
deselectAnswer(this);
});
$(".answer-d-btn").not(this).each(function() {
deselectAnswer(this);
});
$(".answer-e-btn").not(this).each(function() {
deselectAnswer(this);
});
console.log(this.id);
});
我以为可以,但是不行,谁能告诉我为什么吗? 我有一个可以工作的复杂函数,但我希望它更简单......
button.addEventListener("click", function() {
selectAnswer(this);
var letterTmp = this.id.split('-')[3];
$(".answer-" + letterTmp + "-btn").not(this).each(function() {
deselectAnswer(this);
});
console.log(this.id);
});
我认为这就是我的解决方案。 :)
最佳答案
为所有按钮指定相同的 class="answer_btn"
。然后你就可以做
$(".answer_btn").click(function() {
select_answer(this);
$(".answer_btn").not(this).each(function() {
deselect_answer(this);
});
});
关于JavaScript - 如何使其更加动态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60780891/