單選按鈕：更改z索引

Question

我想要做的就是讓選擇單選按鈕時，所選圖像的z索引立即變爲最高值。我有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功能是錯誤的。

1. 您的選擇並不需要有輸入之間的冒號，然後鍵入

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

2. 對於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"; 
     } 
    });