在不使用单选按钮的情况下更快地使用单选按钮功能

Question

我有一个网页，它加载了14个图像作为单选按钮的可选图标。现在，这些按钮在选择一个取消选择另一个的地方工作，这是我想要的功能。

问题是，在点击所需图像之后，(相对而言(该图像需要很长时间才能"显示"；检查"；。对于互斥的大量可选按钮，是否有更快的结构？

以下是我的代码以供澄清。

点击其中一张图像并成为唯一检查的图像的动作就像6-700ms，这感觉很荒谬

<div class="image-gallery" align="center">
<p align="center" style="font-size: 25px;">Now lets choose a team photo.</p>
<div>
{% assign upperLimit = photoCount%}
{% for i in (1..upperLimit)%}
<!--All the photos in the folder as clickable buttons-->
<input type="radio" class="radio_item" value="{{i}}" name="item" id="radio{{i}}">
<label class="label_item" for="radio{{i}}"> <img src="/images/teams-pictures/{{i}}.jpg" class="img-selector"> </label>
{%- endfor -%}
</div>
<div>
<button class="button" style="padding: 15px 100%" onclick="next()">Next</button>
</div> 

Answer 1

我认为问题不在于单选按钮，而在于单击时触发的JavaScript代码，或者图像的大小。

如果我用实际图像和20个选项重现您的案例，则在单击图像和单选按钮的状态更改之间没有可察觉的延迟。

new Vue({
el: '#app',
data() {
return {
upperLimit: 20
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<fieldset class="image-gallery" align="center">
<legend align="center" style="font-size: 25px;">Now lets choose a team photo.</legend>
<div>
<p v-for="i in upperLimit">
<!--All the photos in the folder as clickable buttons-->
<input type="radio" class="radio_item" :value="i" name="item" :id="'radio' + i">
<label class="label_item" :for="'radio' + i"> <img src="https://loremflickr.com/320/240" class="img-selector" alt="Provide some helpful alt text for the option, please"> </label>
</p>
</div>
</fieldset>
</div>