更改与“单选按钮检查”相关的 src

Question

在我的项目中，我想更改与我的单选按钮检查相关的 src 部分（ar-button 的 src）。

例如：当您选中“选项 1”时，我想更改 ar 按钮上的 src 部分。比当你检查 Option3x（检查 option1 和 option1x）时，我想再次更改 src。

我的意思是对于所有 64 种检查组合，我想更改 src。

任何帮助或建议都会很棒！

谢谢..

                    <label>
                        <input type="radio" id="diffuse" name="kumas" value="textues/kumas/2/pgwfpjp_2K_Albedo.jpg"checked>
                        Option1
                    </label>
            
                    <label>
                        <input type="radio"id="adiffuse" name="kumas" value="textues/kumas/1/oi2veqp_2K_Albedo.jpg">
                       Option 2
                    </label>

                    <label>
                        <input type="radio" id="bdiffuse"name="kumas" value="textues/kumas/3/sjfvce3c_2K_Albedo.jpg">
                        Option 3
                    </label>

                    <label>
                        <input type="radio" id="cdiffuse"name="kumas" value="textues/kumas/4/sjfvcjzc_2K_Albedo.jpg">
                     Option 4
                    </label>
                    
                    
<br><br>




                    <label>
                        <input type="radio" id="diffuse1" name="kol" value="textues\kol\1\teqbcizc_2K_Albedo.jpg" checked>
                        Option 1x
                    </label>

                    <label>
                        <input type="radio" id="adiffuse1" name="kol" value="textues\kol\2\tfjbderc_2K_Albedo.jpg">
                       Option 2x
                    </label>

                    <label>
                        <input type="radio" id="bdiffuse1"name="kol" value="textues\kol\3\tcnodi3c_2K_Albedo.jpg">
                        Option 3x
                    </label>

                    <label>
                        <input type="radio" id="cdiffuse1"name="kol" value="textues\kol\4\tcicdebc_2K_Albedo.jpg">
                      Option 4x
                    </label>
  

                </div>
            
            </div>

        </div>



<br><br>

                    <label>
                        <input type="radio" id="diffuse2" name="dugme" value="textues\metal\1\scksebop_2K_Albedo.jpg"  checked>
                       Option 1z
                    </label>

                    <label>
                        <input type="radio" id="adiffuse2" name="dugme" value="textues\metal\2\se4objgc_2K_Albedo.jpg">
                       Option 2z
                    </label>

                    <label>
                        <input type="radio" id="bdiffuse2"name="dugme" value="textues\metal\3\se4pcbbc_2K_Albedo.jpg">
                        Option 3z
                    </label>

                    <label>
                        <input type="radio" id="cdiffuse2"name="dugme" value="textues\metal\4\shkxcgfc_2K_Albedo.jpg">
                     Option 4z
                    </label>


<br><br>
                    
                    
    <ar-button

    id="change" src="https://basebros.com/models/ar_base_tekli_koltuk_3d.glb"
    
    id="change2 ios-src="https://basebros.com/models/ar_base_tekli_koltuk_3d.usdz"
    
    title="3D-AR by BASE">
    
    <img class="arbuttonicon" src="Assets/evindebutton.png" width="170px" alt="AR-icon">
    
    </ar-button>       
                    
                    

     

Answer 1

尝试使用此代码：

const kumas = document.getElementsByName("kumas");
const kol = document.getElementsByName("kol");
const dugme = document.getElementsByName("dugme");
const arButton = document.querySelector("ar-button");
    
let sources = [[[],[],[],[]],[[],[],[],[]],[[],[],[],[]],[[],[],[],[]]]; /* Fill this with the sources. The first element is if the first option for kumas is selected, the second is for if the second option is selected, etc. The elements inside those elements are for each of the different options for kol, and the elements inside those elements are for each of the different options for dugme. */

function foo() {
    let kumasSelected;
    let kolSelected;
    let dugmeSelected;
    for(let i of kumas) {
        if(i.checked) {
            kumasSelected = kumas.indexOf(i);
        }
    }
    for(let i of kol) {
        if(i.checked) {
            kolSelected = kol.indexOf(i);
        }
    }
    for(let i of dugme) {
        if(i.checked) {
            dugmeSelected = dugme.indexOf(i);
        }
    }
    
    arButton.src = sources[kumasSelected][kolSelected][dugmeSelected];
}

每次要更新源时运行该函数。

Answer 2

    <label>
        <input type="radio" id="diffuse" name="kumas" value="textues/kumas/2/pgwfpjp_2K_Albedo.jpg"checked>
        Option1
    </label>

    <label>
        <input type="radio"id="adiffuse" name="kumas" value="textues/kumas/1/oi2veqp_2K_Albedo.jpg">
       Option 2
    </label>

    <label>
        <input type="radio" id="bdiffuse"name="kumas" value="textues/kumas/3/sjfvce3c_2K_Albedo.jpg">
        Option 3
    </label>

    <label>
        <input type="radio" id="cdiffuse"name="kumas" value="textues/kumas/4/sjfvcjzc_2K_Albedo.jpg">
     Option 4
    </label>
    
    
<br><br>




    <label>
        <input type="radio" id="diffuse1" name="kol" value="textues\kol\1\teqbcizc_2K_Albedo.jpg" checked>
        Option 1x
    </label>

    <label>
        <input type="radio" id="adiffuse1" name="kol" value="textues\kol\2\tfjbderc_2K_Albedo.jpg">
       Option 2x
    </label>

    <label>
        <input type="radio" id="bdiffuse1"name="kol" value="textues\kol\3\tcnodi3c_2K_Albedo.jpg">
        Option 3x
    </label>

    <label>
        <input type="radio" id="cdiffuse1"name="kol" value="textues\kol\4\tcicdebc_2K_Albedo.jpg">
      Option 4x
    </label>


</div>

</div>

</div>



<br><br>

    <label>
        <input type="radio" id="diffuse2" name="dugme" value="textues\metal\1\scksebop_2K_Albedo.jpg"  checked>
       Option 1z
    </label>

    <label>
        <input type="radio" id="adiffuse2" name="dugme" value="textues\metal\2\se4objgc_2K_Albedo.jpg">
       Option 2z
    </label>

    <label>
        <input type="radio" id="bdiffuse2"name="dugme" value="textues\metal\3\se4pcbbc_2K_Albedo.jpg">
        Option 3z
    </label>

    <label>
        <input type="radio" id="cdiffuse2"name="dugme" value="textues\metal\4\shkxcgfc_2K_Albedo.jpg">
     Option 4z
    </label>


<br><br>
    
    
<ar-button

src="https://basebros.com/models/ar_base_tekli_koltuk_3d.glb"


title="3D-AR by BASE">

<img class="arbuttonicon" src="Assets/evindebutton.png" width="170px" alt="AR-icon">

</ar-button>  



<script>

const kumas = document.getElementsByName("kumas");
const kol = document.getElementsByName("kol");
const dugme = document.getElementsByName("dugme");
const arButton = document.querySelector("ar-button");
    
let sources = [[["https://basebros.com/models/ar_base_ayakkabi.glb"],["https://basebros.com/models/ar_base_camasir_makinesi_3d.glb"],["https://basebros.com/models/ar_base_kahve_makinesi_3d.glb"],["https://basebros.com/models/ar_base_nintendo.glb"]],[[],[],[],[]],[[],[],[],[]],[[],[],[],[]]]; /* Fill this with the sources. The first element is if the first option for kumas is selected, the second is for if the second option is selected, etc. The elements inside those elements are for each of the different options for kol, and the elements inside those elements are for each of the different options for dugme. */

function foo() {
    let kumasSelected;
    let kolSelected;
    let dugmeSelected;
    for(let i of kumas) {
        if(i.checked) {
            kumasSelected = kumas.indexOf(i);
        }
    }
    for(let i of kol) {
        if(i.checked) {
            kolSelected = kol.indexOf(i);
        }
    }
    for(let i of dugme) {
        if(i.checked) {
            dugmeSelected = dugme.indexOf(i);
        }
    }
    
    arButton.src = sources[kumasSelected][kolSelected][dugmeSelected];
}
</script>