单选按钮：更改 z 索引

Question

What I'm trying to do is make it so that when a radio button is selected the z-index of the selected image is immediately changed to the highest value.我有 6 张图像堆叠在一起。每个单选按钮都与其中一个图像相关联。 The viewer must see the image whenever its associated radio button is selected.每个单选按钮的 "name" 是 "selection." 我试过了，但它不起作用：

`

                <div class="radio"><label><input type="radio" value="2" name="selection">Bouquet with Chocolate</label></div>
                <div class="radio"><label><input type="radio" value="3" name="selection">with Clear Vase</label></div>
                <div class="radio"><label><input type="radio" value="4" name="selection">with Clear Vase & Chocolate</label></div>
                <div class="radio"><label><input type="radio" value="5" name="selection">with Red Vase</label></div>
                <div class="radio"><label><input type="radio" value="6" name="selection">with Red Vase & Chocolate</label></div>

$(document).ready(function(){
            $('input:[type=radio][name=selection]').change(function(){
                if (this.value == '1'){
                    document.getElementById('image_1').style.zIndex =   "2";
                }
                else if (this.value == '2'){
                    document.getElementById('image_2').style.zIndex = "2";
                }
                else if (this.value == '3'){
                    document.getElementById('image_3').style.zIndex = "2";
                }
                else if (this.value == '4'){
                    document.getElementById('image_4').style.zIndex = "2";
                }
                else if (this.value == '5'){
                    document.getElementById('image_5').style.zIndex = "2";
                }
                else (this.value == '6'){
                    document.getElementById('image_6').style.zIndex = "2";
                }
            });
        });

`

Answer 1

您的输入选择器和 if/else 功能有误。

您的选择器不需要在输入和类型之间有一个冒号

input:[type=radio][name=selection]
对于 if/else 函数，最后一个 else 不应分配条件。如果您需要定义最终条件而不是包含所有其他情况，请以 else if.
结尾
else (this.value == '6'){ document.getElementById('image_6').style.zIndex = "2"; }

正确的代码应该是这样的：

  $('input[type=radio][name=selection]').change(function(){
      if (this.value == '1'){
        document.getElementById('image_1').style.zIndex =   "2";
      }
      else if (this.value == '2'){
        document.getElementById('image_2').style.zIndex = "2";
      }
      else if (this.value == '3'){
        document.getElementById('image_3').style.zIndex = "2";
      }
      else if (this.value == '4'){
        document.getElementById('image_4').style.zIndex = "2";
      }
      else if (this.value == '5'){
        document.getElementById('image_5').style.zIndex = "2";
      }
      else if (this.value == '6'){
        document.getElementById('image_6').style.zIndex = "2";
      }
  });

单选按钮：更改 z 索引

Radio Button: change z index

jquery

z-index

radio-button