Javascript 添加图片 src

我有几个选择,我想帮助如何简化脚本。请问我应该如何更改我的代码?

<script>
let image1 = document.querySelector("#image-1");
let image2 = document.querySelector("#image-2");
let image3 = document.querySelector("#image-3");
let image4 = document.querySelector("#image-4");
let image5 = document.querySelector("#image-5");
    
/* -----------------IMAGE 1--------------------- */
let volba_1_1_1 = document.querySelector(".fluentform .volba-1-1.ff_list_buttons .ff-el-form-check input[value='1']");
let volba_1_1_2 = document.querySelector(".fluentform .volba-1-1.ff_list_buttons .ff-el-form-check input[value='2']");
let volba_1_1_3 = document.querySelector(".fluentform .volba-1-1.ff_list_buttons .ff-el-form-check input[value='3']");
let volba_1_1_4 = document.querySelector(".fluentform .volba-1-1.ff_list_buttons .ff-el-form-check input[value='4']");

let volba_1_2_1 = document.querySelector(".fluentform .volba-1-2.ff_list_buttons .ff-el-form-check input[value='1']");
let volba_1_2_2 = document.querySelector(".fluentform .volba-1-2.ff_list_buttons .ff-el-form-check input[value='2']");
let volba_1_2_3 = document.querySelector(".fluentform .volba-1-2.ff_list_buttons .ff-el-form-check input[value='3']");
let volba_1_2_4 = document.querySelector(".fluentform .volba-1-2.ff_list_buttons .ff-el-form-check input[value='4']");

let volba_1_3_1 = document.querySelector(".fluentform .volba-1-3.ff_list_buttons .ff-el-form-check input[value='1']");
let volba_1_3_2 = document.querySelector(".fluentform .volba-1-3.ff_list_buttons .ff-el-form-check input[value='2']");
let volba_1_3_3 = document.querySelector(".fluentform .volba-1-3.ff_list_buttons .ff-el-form-check input[value='3']");
let volba_1_3_4 = document.querySelector(".fluentform .volba-1-3.ff_list_buttons .ff-el-form-check input[value='4']");

volba_1_1_1.addEventListener("click",() => {
    image1.src = "https://calc.ffd.sk/wp-content/uploads/2021/07/police_1.png";
})  
volba_1_1_2.addEventListener("click",() => {
    image1.src = "https://calc.ffd.sk/wp-content/uploads/2021/07/police_2.png";
})
volba_1_1_3.addEventListener("click",() => {
    image1.src = "https://calc.ffd.sk/wp-content/uploads/2021/07/police_3.png";
})  
volba_1_1_4.addEventListener("click",() => {
    image1.src = "https://calc.ffd.sk/wp-content/uploads/2021/07/police_4.png";
})

volba_1_2_1.addEventListener("click",() => {
    image1.src = "https://calc.ffd.sk/wp-content/uploads/2021/07/zasuvky_1.png";
})  
volba_1_2_2.addEventListener("click",() => {
    image1.src = "https://calc.ffd.sk/wp-content/uploads/2021/07/zasuvky_2.png";
})
volba_1_2_3.addEventListener("click",() => {
    image1.src = "https://calc.ffd.sk/wp-content/uploads/2021/07/zasuvky_3.png";
})  
volba_1_2_4.addEventListener("click",() => {
    image1.src = "https://calc.ffd.sk/wp-content/uploads/2021/07/zasuvky_4.png";
})

volba_1_3_1.addEventListener("click",() => {
    image1.src = "https://calc.ffd.sk/wp-content/uploads/2021/07/kratke_1.png";
})  
volba_1_3_2.addEventListener("click",() => {
    image1.src = "https://calc.ffd.sk/wp-content/uploads/2021/07/kratke_2.png";
})
volba_1_3_3.addEventListener("click",() => {
    image1.src = "https://calc.ffd.sk/wp-content/uploads/2021/07/kratke_3.png";
})  
volba_1_3_4.addEventListener("click",() => {
    image1.src = "https://calc.ffd.sk/wp-content/uploads/2021/07/kratke_4.png";
})

我需要对所有 5 个图像执行此操作,如果您添加更多选项,我需要更多代码,我会出错,然后在此矩阵中发现错误将非常糟糕:)

您也可以检查代码 website

非常感谢大家!

zys2229888 回答:Javascript 添加图片 src

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/848.html

大家都在问