如何动态变量 javascript

Question

我是 javascript 初学者，我有一个多项选择考试项目，我想在其中获取每个选定答案的响应数据。 我可以通过手动输入代码来完成，但我想让代码更有效率，因为数据可能超过 50 个问题。

这是我最好的代码。

var i;
    for (i = 1; i <= <?= session()->get('participant')['jml_soal'] ?>; i++) {
        window['radio' + i] = document.querySelectorAll("input[name='optionTrue" + i + "']");
        window['rubahtombol' + i] = document.getElementById("buton" + i);
    }

    let findSe = () => {
        let selected = document.querySelector("input[name='optionTrue1']:checked").value;
        var soalId = document.getElementById("idSoal1").value;
        var opsiPilih = document.getElementById("jawaban" + selected).textContent
        document.getElementById("pilihan1").textContent = ". " + opsiPilih;
        rubahtombol1.classList.remove("btn-secondary");
        rubahtombol1.classList.add("btn-primary")
    }
    let findSe1 = () => {
        let selected = document.querySelector("input[name='optionTrue2']:checked").value;
        var soalId = document.getElementById("idSoal2").value;
        var opsiPilih = document.getElementById("jawaban" + selected).textContent
        document.getElementById("pilihan2").textContent = ". " + opsiPilih;
        rubahtombol2.classList.remove("btn-secondary");
        rubahtombol2.classList.add("btn-primary")
    }

    radio1.forEach(radioBtn => {
        radioBtn.addEventListener("change", findSe1);
    });
    radio2.forEach(radioBtn1 => {
        radioBtn1.addEventListener("change", findSe2);
    });
    findSe1();
    findSe2();

我正在尝试这样做但没有工作

var i;
    for (i = 1; i <= <?= session()->get('participant')['jml_soal'] ?>; i++) {
        window['radio' + i] = document.querySelectorAll("input[name='optionTrue" + i + "']");
        window['rubahtombol' + i] = document.getElementById("buton" + i);
        window['findSe' + i] = () => {
            let selected = document.querySelector("input[name='optionTrue1']:checked").value;
            var soalId = document.getElementById("idSoal1").value;
            console.log(selected);
            var opsiPilih = document.getElementById("jawaban" + selected).textContent
            console.log("aku pilih:" + opsiPilih);
            console.log("id saol:" + soalId);
            document.getElementById("pilihan1").textContent = ". " + opsiPilih;
            window['rubahtombol'+i.classList.remove("btn-secondary")];
            window['rubahtombol'+i.classList.add("btn-primary")];
        }
    }
    radio1.forEach(radioBtn => {
        radioBtn.addEventListener("change", findSe1);
    });
    radio2.forEach(radioBtn1 => {
        radioBtn1.addEventListener("change", findSe2);
    });
    findSe1();
    findSe2();

我想的是，我想在一个循环中做到这一点

Answer 1

您的第二种方法看起来非常接近，但您需要使i位于循环体的本地。 参见JavaScript 循环内的闭包——简单实用的例子

但是你可以使用 OOP 让它更干净一些。

class Button {
    contructor(i) {
        this.index = i;
        this.radio = document.querySelectorAll(`input[name='optionTrue${i}']`);
        this.rumbahtombol = document.getElementById("buton" + i);
        this.radio.addEventListener("change", this.findSe.bind(this));
    }

    findSe() {
        let selected = document.querySelector(`input[name='optionTrue${this.index}']:checked`).value;
        let soalId = document.getElementById(`idSoal${this.index}`).value;
        let opsiPilih = document.getElementById("jawaban" + selected).textContent;
        document.getElementById(`pilihan${this.index}`).textContent = ". " + opsiPilih;
        this.rubahtombol.classList.remove("btn-secondary");
        this.rubahtombol.classList.add("btn-primary")
    }
}

for (let i = 1; i <= <?= session()->get('participant')['jml_soal'] ?>; i++) {
    new Button(i);
}

Answer 2

我对@Barmar 编写的代码做了一些改动，它起作用了

class Button {
    contructor(i) {
        let radio = [];
        this.index = i;
        radio[i] = document.querySelectorAll(`input[name='optionTrue` + i + `']`);
        radio[i].forEach(radioBtn => {
            radioBtn.addEventListener("change", this.findSe.bind(this));
        });
    }

    findSe() {
        let rubahtombol = []
        let selected = document.querySelector(`input[name='optionTrue${this.index}']:checked`).value;
        let soalId = document.getElementById(`idSoal${this.index}`).value;
        let opsiPilih = document.getElementById("jawaban" + selected).textContent;
        document.getElementById(`pilihan${this.index}`).textContent = ". " + opsiPilih;
        rubahtombol = document.getElementById(`buton${this.index}`);
        rubahtombol.classList.remove("btn-secondary");
        rubahtombol.classList.add("btn-primary")
    }
}

for (let i = 1; i <= <?= session()->get('participant')['jml_soal'] ?>; i++) {
    new Button(i).contructor(i);
}