Question

我与测验一起工作，并且我想更改按钮的颜色，所以当我点击按钮时，我想更改他的背景颜色，我已经在div中创建了动态创建的按钮，为此，我想要改变颜色。

JS：

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>

所以我尝试在此功能中更改bg的颜色

$（“。answ-container”）。on（“ click”，“ .next-btn”，函数（）{

要添加此代码：

$(this).css("background-color","red")

但这对我不起作用。因此，在单击时，我想更改按钮的背景色，当我转到我所着色的nex问题上一个按钮时。

工作示例：https://jsfiddle.net/qunzorez/Lnt8f2dv/8/

Answer 1

好的，我想我明白你想要什么。这是一个线索，您可以继续前进。我不会编辑您的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;
}

在创建应答按钮时，将为按钮添加“ clicked”类并保存索引。

原则是和班级一起玩。

Answer 2

如果我在第一个问题中回答正确，然后转到下一个，但是我在上一个问题中弄错了，我将有可能改变主意，为此，我创建了按钮previus [sic]，当用户点击prev时，要上一个问题，应该显示上一个[原文]答案

在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/

还有一个较早的错误（在注释中讨论），该错误会循环进行测验而不是答案计数-还在小提琴中进行了更新。

如何更改按钮onclick jQuery

2 个答案: