实现单选开关

Question

### 问题描述
做一种单选开关--如果我选择了卡口，其他的选项前面的开关都变成闭合的形式（就是我在保证了选择了某一个选项（yesCheckIcon）的情况下，如下把其他的选项前面的图片变成noCheckIcon），做这样一种开关模式

问题出现的环境背景及自己尝试过哪些方法

这里的noCheckIcon和yesCheckIcon就是控制开关的开/关，数组span中的值就是$('#ulli-' + index)中想对应的index，怎么实现这个功能，请各位大佬指点一下

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
getDataByType(index) {
let that = this;
let span = [4, 7, 5, 11, 10, 6, 3, 8, 9, 1, 2];
if ($('#ulli-' + index).attr('src') != that.noCheckIcon) {
$('#ulli-' + index).attr('src', that.noCheckIcon);

}
}

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

这是vue吧，为什么还用jquery去驱动？
写个简单的实现方法：

<template>
  <Switch v-for="i in 10" :key="index" :on="index === currentIndex" @change="currentIndex = index"> 
  <!--switch是你单独实现的switch组件，动画什么的都在组件内部实现，通过比对index和更新currentIndex来实现对应的效果，至于属性和事件的绑定可以按你自己的爱好来,on表示开关，change表示手动操作后的反馈-->
</template>

<script>
export default {
    data () {
        return {
          currentIndex: '' // 这个就是你当前选择switch的序号
        }
    }
}
</script>

Answer 2

这里用原生组件就能很好的完成功能，推荐阅读一下我的文章 纯CSS实现多选组件。另外还有一个视频课程 写 CSS 也要开脑洞：万能的 `:checked + label` 也可以看下。