更改与"Radio Button Checks"相关的源

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="textueskol1teqbcizc_2K_Albedo.jpg" checked>
Option 1x
</label>
<label>
<input type="radio" id="adiffuse1" name="kol" value="textueskol2tfjbderc_2K_Albedo.jpg">
Option 2x
</label>
<label>
<input type="radio" id="bdiffuse1"name="kol" value="textueskol3tcnodi3c_2K_Albedo.jpg">
Option 3x
</label>
<label>
<input type="radio" id="cdiffuse1"name="kol" value="textueskol4tcicdebc_2K_Albedo.jpg">
Option 4x
</label>

</div>

</div>
</div>

<br><br>
<label>
<input type="radio" id="diffuse2" name="dugme" value="textuesmetal1scksebop_2K_Albedo.jpg"  checked>
Option 1z
</label>
<label>
<input type="radio" id="adiffuse2" name="dugme" value="textuesmetal2se4objgc_2K_Albedo.jpg">
Option 2z
</label>
<label>
<input type="radio" id="bdiffuse2"name="dugme" value="textuesmetal3se4pcbbc_2K_Albedo.jpg">
Option 3z
</label>
<label>
<input type="radio" id="cdiffuse2"name="dugme" value="textuesmetal4shkxcgfc_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="textueskol1teqbcizc_2K_Albedo.jpg" checked>
Option 1x
</label>
<label>
<input type="radio" id="adiffuse1" name="kol" value="textueskol2tfjbderc_2K_Albedo.jpg">
Option 2x
</label>
<label>
<input type="radio" id="bdiffuse1"name="kol" value="textueskol3tcnodi3c_2K_Albedo.jpg">
Option 3x
</label>
<label>
<input type="radio" id="cdiffuse1"name="kol" value="textueskol4tcicdebc_2K_Albedo.jpg">
Option 4x
</label>

</div>
</div>
</div>

<br><br>
<label>
<input type="radio" id="diffuse2" name="dugme" value="textuesmetal1scksebop_2K_Albedo.jpg"  checked>
Option 1z
</label>
<label>
<input type="radio" id="adiffuse2" name="dugme" value="textuesmetal2se4objgc_2K_Albedo.jpg">
Option 2z
</label>
<label>
<input type="radio" id="bdiffuse2"name="dugme" value="textuesmetal3se4pcbbc_2K_Albedo.jpg">
Option 3z
</label>
<label>
<input type="radio" id="cdiffuse2"name="dugme" value="textuesmetal4shkxcgfc_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>