Question

以下div将一些图像堆叠在一起

<div class='small-6 medium-6 large-6 columns productimage'>  
  <img src='small/b6k7_fG1.png' name='bf' class='base' />  
  <img src='small/seat_flex_G1.png' id='seat' name='seat'  class='overlay' style='z-index: 1' />  
  <img src='small/back_ZS.png' id='back' name='back' class='overlay' style='z-index: 2' />  
  <img src='small/back_support_G1.png' class='overlay' style='z-index: 3' />  
</div>

用户界面允许用户更改属性，其中一些属性链接在一起，并使用给定名称刷新图像

一套

<div class="product">
  <h6>Arms</h6>
  <input type="radio" id="arms_" name="arms" value="_"><label>No Arms</label>
  <input type="radio" id="arms_f_" name="arms" value="_f_" checked="checked"><label>S Arms</label>
  <input type="radio" id="arms_fa_" name="arms" value="_f_"><label>A Arms</label>
</div>  
<div class="product">
  <h6>Base and Frame</h6>
  <input type="radio" id="b_f[bG1_fG1]" name="b_f" value="bG1_fG1" checked="checked">
  <input type="radio" id="b_f[b65_f6KA]" name="b_f" value="b65_f6KA">
  <input type="radio" id="b_f[b6K8_fG1]" name="b_f" value="b6K8_fG1">
  <input type="radio" id="b_f[b6K8_f6KA]" name="b_f" value="b6K8_f6KA">
  <input type="radio" id="b_f[b6KA_fG1]" name="b_f" value="b6K8_fG1">
  <input type="radio" id="b_f[b65_fG1]" name="b_f" value="b65_f6KA">
</div>

第二组

<div>
  <input type="radio" id="seat_depth_" name="seat_depth" value="_" checked="checked"><label>Fixed </label>
  <input type="radio" id="seat_depth_flex_" name="seat_depth" value="_flex_"><label>Flex</label>
</div>  
<div>
  <label><input type="radio" class='imagepick' id="seat_98" name="seat" value="98" checked="checked"><img src="98.JPG">  </label>
  <label><input type="radio" class='imagepick' id="seat_ZK" name="seat" value="ZK"><img src="ZK.JPG">  </label>
  <label><input type="radio" class='imagepick' id="seat_ZS" name="seat" value="ZS"><img src="Zs.jpg">  </label>
  <label><input type="radio" class='imagepick' id="seat_BRN" name="seat" value="BRN"><img src="BRN.jpg">  </label>
  <label><input type="radio" class='imagepick' id="seat_DTR" name="seat" value="DTR"><img src="DTR.jpg">  </label>
  <label><input type="radio" class='imagepick' id="seat_97" name="seat" value="97"><img src="97.jpg">  </label>
  <label><input type="radio" class='imagepick' id="seat_SG" name="seat" value="SG"><img src="sg.jpg">  </label>
  <label><input type="radio" class='imagepick' id="seat_G1" name="seat" value="G1"><img src="g1.jpg">  </label>
</div>

独立的onclick输入

<div>
  <label><input type="radio" class='imagepick' id="back_98" name="back" value="98" checked="checked"  onclick='document.getElementById("back").src="small/back_98.png"'></label>
  <label><input type="radio" class='imagepick' id="back_ZK" name="back" value="ZK" onclick='document.getElementById("back").src="small/back_ZK.png"'></label>
  <label><input type="radio" class='imagepick' id="back_ZS" name="back" value="ZS" onclick='document.getElementById("back").src="small/back_ZS.png"'></label>
  <label><input type="radio" class='imagepick' id="back_BRN" name="back" value="BRN" onclick='document.getElementById("back").src="small/back_BRN.png"'></label>
  <label><input type="radio" class='imagepick' id="back_DTR" name="back" value="DTR" onclick='document.getElementById("back").src="small/back_DTR.png"'></label>
  <label><input type="radio" class='imagepick' id="back_97" name="back" value="97" onclick='document.getElementById("back").src="small/back_97.png"'></label>
  <label><input type="radio" class='imagepick' id="back_SG" name="back" value="SG" onclick='document.getElementById("back").src="small/back_SG.png"'></label>
  <label><input type="radio" class='imagepick' id="back_G1" name="back" value="G1" onclick='document.getElementById("back").src="small/back_G1.png"'></label>
</div>

只要互动仅限于一个集合（+独立的onclick输入）：

$("input[type=radio]").on("change", function() {  
  var seat_image = $("input[name=seat_depth]:checked").val() + $("input[name=seat]:checked").val();  
  $("#seat").attr("src", "small/seat" +  seat_image  + ".png");  
})

javascript正常触发

不过，添加无线电输入仍会触发上述javascript，并实际上是一个空白。
想要添加

$("input[type=radio]").on("change", function() {  
  var frame_image = $("input[name=arms]:checked").val() + $("input[name=b_f]:checked").val();  
  $("#bf").attr("src", "small/" +  frame_image  + ".png");  
})

也失败了。

如何将javascript重构为仅使用给定的输入名称触发（如在第一种情况下，两个name中的一个-seat或seat_depth），然后将其与其他触发机制共存，同时允许触发独立的onclick事件？

保持多个onClick事件独立但仍有效

0 个答案: