[英]How to change current background color of button onclick jQuery
我使用测验,我想更改 colors 个按钮,所以当我点击按钮时,我想更改他的背景颜色,我有 div,其中我有 dynamycaly 创建的按钮,对于这个按钮,我想更改颜色。
记者:
var quiz = [
{ stepName: "Check Oil", frequency: "1 / Shift", stepDescription: "Verify the presence of spilled oil", image: "https://cdn.iconscout.com/icon/free/png-512/schedule-maintenance-1575170-1331504.png", choices: ["OK", "NOK", "N/A"], savedAnswer: "" },
{ stepName: "Check noise", frequency: "1 / Shift", stepDescription: "Check for unusual noise from machine", image: "", choices: ["OK", "NOK", "N/A"], savedAnswer: "" },
{ stepName: "Clean filter", frequency: "1 / Week (Monday)", stepDescription: "Clean the air filter at compressed air inlet", image: "https://cdn.iconscout.com/icon/free/png-512/schedule-maintenance-1575170-1331504.png", choices: ["OK", "NOK", "N/A"], savedAnswer: "" },
{ stepName: "Check Andon", frequency: "1 / Shift", stepDescription: "Check if andon light is on", image: "https://cdn.iconscout.com/icon/free/png-512/schedule-maintenance-1575170-1331504.png", choices: ["OK", "NOK", "N/A"], savedAnswer: "" },
{ stepName: "Safety barrier", frequency: "1 / Shift", stepDescription: "Check the proper functionality of light barrier(s)", image: "https://cdn.iconscout.com/icon/free/png-512/schedule-maintenance-1575170-1331504.png", choices: ["OK", "NOK"], savedAnswer: "" }
];
var index = 0;
function parseQuiz() {
for (var i = 0; quiz.length > i; i++) {
creatingAnswers(quiz[index].choices[i]);
setQuizToDiv(quiz[index].stepName, quiz[index].frequency, quiz[index].stepDescription, quiz[index].image);
}
}
function setQuizToDiv(stepName, frequency, stepDescription, image) {
$(".quiz-container").html('');
var quizHtml;
if (image != "") {
quizHtml = `
<div class="step-name">
${stepName}
</div>
<div class="frequency">
Frequency: ${frequency}
</div>
<div class="step-desc">
${stepDescription}
</div>
<div class="step-image">
<div id="overlay"></div>
<img class="main-img" src="${image}" />
</div>`;
} else {
quizHtml = `
<div class="step-name">
${stepName}
</div>
<div class="frequency">
Frequency: ${frequency}
</div>
<div class="step-desc">
${stepDescription}
</div>
<div class="separation-div"></div>
`;
}
$(".quiz-container").append(quizHtml);
}
function creatingAnswers(choises) {
if (choises != undefined) {
var answers = `<button class="btn next-btn">${choises}</button>`
$(".answ-container").append(answers);
}
}
parseQuiz();
$(".quiz-container").on("click", ".main-img", function () {
$('#overlay')
.css({ backgroundImage: `url(${this.src})` })
.addClass('open')
.one('click', function () { $(this).removeClass('open'); });
});
$(".answ-container").on("click", ".next-btn", function () {
let indexData = index + 1;
let arrayData = quiz.length - 1;
if (indexData <= arrayData) {
quiz[index].savedAnswer = $(this).text();
index++;
$(".answ-container").html("");
parseQuiz();
navButton();
}
});
HTML:
<div class="quiz-container"></div>
<div class="answ-container"></div>
所以我尝试更改此功能中的背景颜色
$(".answ-container").on("点击", ".next-btn", function () {
要添加此代码:
$(this).css("background-color","red")
但这对我不起作用。 所以在点击我想改变按钮的背景时,当我 go 到我着色的下一个问题 previus 按钮被保存时。
好的,我想我明白你想要什么。 这是一个线索,这样你就可以进步。 我不会编辑你的 jsfiddle 因为你的代码很乱......
您可以在 JS 中放入什么:
$(".answ-container").on("click", ".next-btn", function () {
// adding the class to the clicked button
$(this).addClass('clicked')
// removing the class of the siblings
$(this).siblings().removeClass('clicked')
// saving the index of the answer clicked
quiz[index].savedAnswer = $(this).index()
您可以在 CSS 中输入:
.clicked {
background-color: green;
}
当您创建答案按钮时,您为保存了索引的按钮添加“点击”class。
原则是玩类。
如果我在第一个问题中回答好,我 go 到下一个,但我在上一个问题中犯了错误我将有可能改变主意,为此我创建按钮 previus [原文如此],当用户点击上一个时,它会上一个问题,应该显示 previus[sic] 答案
在creatingAnswers
检查当前问题的savedAnswer
if (quiz[index].savedAnswer == choises)
并做你的事情(例如添加一个类) - 在更新的小提琴(下面)中我已经将append
交换到appendTo
以添加 jquery obj,给出:
function creatingAnswers(choises) {
if (choises != undefined) {
var answers = `<button class="btn next-btn">${choises}</button>`
var ans = $(answers).appendTo(".answ-container");
if (quiz[index].savedAnswer == choises) {
ans.addClass("userchoice");
}
}
}
更新小提琴: https://jsfiddle.net/187autjo/
还有一个较早的错误(在评论中讨论)循环测验计数而不是答案计数 - 这也在小提琴中更新。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.