javascript - 通过鼠标悬停获取 id 号，然后使用该 id 号来切换带有无线电输入焦点的 bg-image

Question

我制作了 9 个产品，每个产品都有 3 个 bg 图像，当我按下 3 个无线电输入中的 1 个（对于每个产品）时，它们会切换。我设法做到了，但它需要 225 行 JS 代码。我有 36 个 id 9 用于产品 div 和 27 用于（3 个无线电输入 x 9 个产品）。

对于产品 ID

var cardback =document.getElementById('fcb');
var cardback1 =document.getElementById('fcb1');
var cardback2 =document.getElementById('fcb2');
.
.
.till ...Id('fcb8');

用于收音机

let radio10 = document.getElementById('BA10g');
let radio100 = document.getElementById('BA100g');
let radioct = document.getElementById('customBA');

let radio101 = document.getElementById('BA10g1');
let radio1001 = document.getElementById('BA100g1');
let radioct1 = document.getElementById('customBA1');
.
.
.till ...Id('customBA8');

然后这是将类（具有不同的 bg 图像）添加到 id 的代码。

radio10.addEventListener("focus",
function(){
    cardback.classList.add('bg10g');
    cardback.classList.remove('bg100g');
    cardback.classList.remove('bg1k');
    document.getElementById('amountBA').style.visibility= 'hidden';
});

radio100.addEventListener("focus",
function(){  
    cardback.classList.remove('bg10g');
    cardback.classList.add('bg100g');
    cardback.classList.remove('bg1k');
    document.getElementById('amountBA').style.visibility= 'hidden';
});

radioct.addEventListener("focus",
function(){
    cardback.classList.remove('bg10g');
    cardback.classList.remove('bg100g');
    cardback.classList.add('bg1k');
    document.getElementById('amountBA').style.visibility= 'visible';
});
.
.
.till var cardback8 (totaling 189 lines)

9 个产品中 1 个的 HTML 代码

 <div class="flip-card">
    <div class="flip-card-inner">
      <div id="SA-AK" class="flip-card-front" id="front"><div  class="wordcard"><h3>SOUR DIESEL</h3></div></div>
                    <div class="flip-card-back" id="fcb">      
                            <h3>SOUR DIESEL</h3>
                            <input type="radio" name="AK" id="BA10g">
                            <label for="AK10g">10g @ USD17.00</label><br>
                            <input type="radio" name="AK" id="BA100g">
                            <label for="AK100g">100g @ USD160.00</label><br>
                            <input type="radio" name="AK" id="customBA">
                            <label for="customAK">custom amount:</label>
                            <input type="number" name="AK" id="amountBA" max="1000">
                            <br>
                            <input type="button" value="Add to cart">  
                    </div>
                </div>
            </div>

我已经设法减少到这么多

var a;
var selected = document.getElementById('FO10g' + a);
var selected100 = document.getElementById('FO100g' + a);
var selectedCA = document.getElementById('customFO' + a);
var fcb = document.getElementById('fcbh' + a);

selected.addEventListener("focus",
    function(){
        fcb.classList.add('bg10g');
        fcb.classList.remove('bg100g');
        fcb.classList.remove('bg1k');
    document.getElementById('amountBA' + a).style.visibility= 'hidden';
});

selected100.addEventListener("focus",
function(){
    
    fcb.classList.remove('bg10g');
    fcb.classList.add('bg100g');
    fcb.classList.remove('bg1k');
    document.getElementById('amountBA' + a).style.visibility= 'hidden';
});

selectedCA.addEventListener("focus",
function(){
    
    fcb.classList.remove('bg10g');
    fcb.classList.remove('bg100g');
    fcb.classList.add('bg1k');
    document.getElementById('amountBA'+ a).style.visibility= 'visible';
});

但我不知道如何将 var a 链接到数字（1 到 8）。对不起，我在这里放了太多代码。提前感谢您的帮助。（仅供参考，这是我的练习项目）（我也没有学习 jQuery）

标签： javascripthtmldom