Question

我正在尝试做的是，当选择单选按钮时，所选图像的z-index立即更改为最高值。我有6张图像堆叠在一起。每个单选按钮与其中一个图像相关联。只要选择了相关的单选按钮，观众就必须看到图像。每个单选按钮的“名称”是“选择”。我尝试了这个，但它不起作用：

`

                <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索引

1 个答案: