Question

正在基于多个属性渲染图像。
图像名称反映了属性值（用于名称a，b和c）。

<div>  
  <img src="112_small.jpg" data-zoom-image="112_big.jpg" id="rendered_choice">  
</div>    
<div>  
  <h6>9</h6>  
  <input type="radio" id="a_1" name="a" value="1" checked="checked" />  
  <input type="radio" id="a_2" name="a" value="2" />  
  <input type="radio" id="a_3" name="a" value="3" />  
</div>  
<div>  
  <h6>10</h6>  
  <input type="radio" id="b_1" name="b" value="1" checked="checked" />  
  <input type="radio" id="b_2" name="b" value="2" />  
  <input type="radio" id="b_3" name="b" value="3" />  
  <input type="radio" id="b_4" name="b" value="4" />  
  <input type="radio" id="b_5" name="b" value="5" />  
</div>  
<div>  
  <h6>11</h6>  
  <input type="radio" id="c_1" name="c" value="1" />  
  <input type="radio" id="c_2" name="c" value="2" checked="checked" />  
</div>

当用户单击单选按钮（例如b_4）时，选中的输入元素需要更改，而新图像则需要渲染为

<img src="142_small.jpg" data-zoom-image="142_big.jpg" id="rendered_choice">

这怎么用jQuery来实现，在jQuery中，文件名除了用户输入的值外还要考虑所有其他选中的值？

Answer 1

在用$.makeArray构成数组之后，只需依次获取每个选中的复选框的value：

$("input[type='radio']").on("change", function() {
  const num = $.makeArray($("input:checked")).map(({ value }) => value).join("");
  $("#rendered_choice").attr("src", num + "_small.jpg").data("zoom-image", num + "_big.jpg");
});

Answer 2

您可以获取每个选中复选框的值，并在输入选中更改时更改img src。

演示：

$("input[type=radio]").on("change", function() {
  var index = $("input[name=a]:checked").val() + $("input[name=b]:checked").val() + $("input[name=c]:checked").val();
  $("#rendered_choice").attr("src", index + "_small.jpg");
  $("#rendered_choice").attr("data-zoom-image", index + "_big.jpg");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>  
  <img src="112_small.jpg" data-zoom-image="112_big.jpg" id="rendered_choice">  
</div>    
<div>  
  <h6>9</h6>  
  <input type="radio" id="a_1" name="a" value="1" checked="checked" />  
  <input type="radio" id="a_2" name="a" value="2" />  
  <input type="radio" id="a_3" name="a" value="3" />  
</div>  
<div>  
  <h6>10</h6>  
  <input type="radio" id="b_1" name="b" value="1" checked="checked" />  
  <input type="radio" id="b_2" name="b" value="2" />  
  <input type="radio" id="b_3" name="b" value="3" />  
  <input type="radio" id="b_4" name="b" value="4" />  
  <input type="radio" id="b_5" name="b" value="5" />  
</div>  
<div>  
  <h6>11</h6>  
  <input type="radio" id="c_1" name="c" value="1" />  
  <input type="radio" id="c_2" name="c" value="2" checked="checked" />  
</div>

基于多个单选按钮输入，使用jQuery更新图像

2 个答案: