Bouton radio: modifier l'index

Question

Ce que j'essaie de faire est de faire en sorte que lorsqu'un bouton radio est sélectionné, l'index z de l'image sélectionnée soit immédiatement changé à la valeur la plus élevée. J'ai 6 images empilées les unes sur les autres. Chaque bouton radio est associé à l'une des images. L'utilisateur doit voir l'image chaque fois que son bouton radio associé est sélectionné. Le "nom" de chaque bouton radio est "sélection". J'ai essayé cela, mais il ne fonctionne pas:

`

   <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

Votre sélecteur d'entrée et si/fonction autre sont erronées.

1. Votre sélection n'a pas besoin d'avoir deux points entre l'entrée et le type

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

2. Pour un si/fonction d'autre, le dernier cas else ne devrait pas avoir une condition assignée. Si vous souhaitez que la condition finale soit définie au lieu d'englober tous les autres cas, terminez par else if.

   else (this.value == '6'){ document.getElementById('image_6').style.zIndex = "2"; }

devrait ressembler le code correct ceci:

$('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"; 
     } 
    });