ラジオボタン：zインデックスを変更する

Question

ラジオボタンを選択すると、選択した画像のZ-インデックスがすぐに最高値に変更されるようにしています。私はお互いの上に積み重ねた6枚の画像を持っています。各ラジオボタンは、画像の1つに関連付けられています。視聴者は、関連付けられたラジオボタンが選択されると必ず画像を見る必要があります。各ラジオボタンの「名前」は「選択」です。私はこれを試してみましたが、それは働いていない：

`

   <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関数は間違っています。

1. あなたのセレクタは、入力間のコロンを持っているし、条件が割り当てられていなければならない場合/他の機能については

   input:[type=radio][name=selection]

2. 、最後のケース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"; 
     } 
    });