Question

我希望使用开关盒，根据选中的单选按钮获得背景图像。但是，我找不到从选中的单选按钮获取值的正确解决方案。

我的代码段：

HTML：

<section class="configurator__product">
       ...
</section>

<label for="blue" class="hidden">Blue</label>
<input type="radio" id="blue" name="color-totebag" value="tote-blue" class="circle tote-blue">
<label for="green" class="hidden">Green</label>
<input type="radio" id="green" name="color-totebag" value="tote-green" class="circle tote-green">
<label for="black" class="hidden">Black</label>
<input type="radio" id="black" name="color-totebag" value="tote-black" class="circle tote-black">

有更多的输入，总共5个，因此我不认为使用if / else是可选的。但是，我希望我在这里提供的代码量能清楚明白。

JavaScript：

const changeTotebagColor = () => {
    let totebagColor = document.getElementsByName(`color-totebag`).value;
    const $totebagImg = document.querySelector(`.configurator__product`);

    switch (totebagColor) {
        case `tote-blue`:
            $totebagImg.style.backgroundImage = "url('assets/img/totebag_blue')";
        case `tote-green`:
            $totebagImg.style.backgroundImage = "url('assets/img/totebag_green')";
        case `tote-black`:
            $totebagImg.style.backgroundImage = "url('assets/img/totebag_black')";
    }
}

changeTotebagColor();

我希望我想弄清楚的是什么。我是JavaScript新手，所以也许我做错了。我已经在网上尝试了许多解决方案，但是我没有运气。如果可能的话，我也想避免使用内联JavaScript，但目前我可以接受任何解决方案。

Answer 1

正如我在评论中提到的那样，事物的设置方式实际上并不是在单击事物时触发功能。您可以在函数后调用它，但这不会“监视”事物。

您可以通过几种方法解决此问题。最简单的方法是（不更改为jquery或其他方法，而无需使用您的vanilla js）将onclick应用于无线电。

示例：

 <input type="radio" onclick="changeTotebagColor()" id="blue" name="color-totebag" value="tote-blue" class="circle tote-blue">

如何使用JavaScript使用单选按钮和开关盒更改img？

1 个答案: