jquery 如何动态变量javascript

bvjxkvbb 于 2023-02-03 发布在 jQuery

关注(0)|答案(2)|浏览(167)

我是一个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();

我想的是我想在一个循环中完成

jquery

来源：https://stackoverflow.com/questions/75290524/how-dinamically-variable-javascript

2条答案

按热度按时间

z31licg01#

第二种方法看起来非常接近，但是需要使i局部化到循环体。
但是你可以用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);
}

赞(0）回复(0）举报 2023-02-03

mhd8tkvw2#

我对@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);
}

赞(0）回复(0）举报 2023-02-03

我来回答

jquery 如何动态变量javascript

2条答案

相关问题

热门标签

最新问答