Question

我想根据单选按钮的状态设置图像的样式。

我的网络应用程序中有三张图片，下面有一个相应的单选按钮。我想要这样，当一个单选按钮的状态为true时，将显示特定条件的对应图像样式选定为标准，而其他两个图像将默认显示。有什么办法可以做到这一点。

这是我的布局：HTML

<img src="images/1 month.jpeg" alt="" id="button1" onclick="m1-plan()" />
<img src="images/6 month.jpeg" alt="" id="button6" onclick="m6-plan()"/>
<img src="images/12 month.jpeg" alt="" id="button12" onclick="m12-plan()"/>

<div>
    <input type="radio" id="plan1" name="plan" onclick="plan1()" checked>
     <input type="radio" id="plan2" name="plan" onclick="plan2()">
     <input type="radio" id="plan3" name="plan" onclick="plan3()"><br>
   </div>

这就是我想要的图像默认外观：CSS

        border-radius: 5px;
        border: 2px solid #ccc;
        width: 150px;
        border: 2px solid #ccc;
        transition: 0.3s;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;

这就是我想要选择的图像：CSS

     border-radius: 5px;
     border: 4px solid #02C5FB;
     width: 205px;

有什么办法吗？？

Answer 1

以下脚本将获取图像的所有ID，并通过执行该函数将“ active”调用添加到图像，同时将其从其他图像中删除。

const allImageIds = ['button1', 'button6', 'button12'];

const styleImage = selectedImageId => {
  allImageIds.forEach(imgId => {
    document.getElementById(imgId).classList.remove('active');
  });
  const image = document.getElementById(selectedImageId);
  image.classList.add('active')
}

在HTML中进行以下onClick调用：

<div>
  <input type="radio" id="plan1" name="plan" onclick="styleImage('button1')" checked>
  <input type="radio" id="plan2" name="plan" onclick="styleImage('button6')">
  <input type="radio" id="plan3" name="plan" onclick="styleImage('button12')"><br>
</div>

Answer 2

您可以最初将类别.img-radio .img-def分配给所有img：

<img src="images/1 month.jpeg" class="img-radio img-def" alt="" id="button1" />
<img src="images/6 month.jpeg" class="img-radio img-def" alt="" id="button6" />
<img src="images/12 month.jpeg" class="img-radio img-def" alt="" id="button12" />

<div>
    <input type="radio" id="plan1" name="plan" onclick="styleImage('button1')" checked>
     <input type="radio" id="plan2" name="plan" onclick="styleImage('button6')">
     <input type="radio" id="plan3" name="plan" onclick="styleImage('button12')"><br>
   </div>

.img-radio类将是一个有用的常量类，通过它我们可以选择与单选按钮相对应的所有img。

然后您可以为img-def类分配“默认样式”，并为CSS中的img-selected类指定样式：

.img-def {
  border-radius: 5px;
  border: 2px solid #ccc;
  width: 150px;
  border: 2px solid #ccc;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s; 
}
.img-selected {
  border-radius: 5px;
  border: 4px solid #02C5FB;
  width: 205px;
}

最后，您可以定义函数styleImage以获取img的id字符串，并将该img的类更改为.img-radio .img-selected，然后再更改其他{{ 1}}到img的班级：

.img-radio .img-def

我可以根据单选按钮状态设置图像样式吗？

2 个答案: