Jquery單選按鈕代碼適用於Chrome，但不適用於Firefox或IE

Question

以下代碼存在問題。它在Chrome瀏覽器中運行良好，但不支持Firefox或IE。基本上我想要做的是改變圖像顯示圓角或方角，取決於用戶從單選按鈕選項中選擇。

這裏是我的代碼：

// set corner style 
    $(".productOptionViewRadio").click(function(){  
     var span_html = $(event.target).next().html();  

     if (span_html == 'Rounded') { 
      $('.ProductThumbImage').css('border-radius','15px');    
      $('.ProductThumbImage img').css('border-radius','15px'); 
     } 
     if (span_html == 'Square') { 
      $('.ProductThumbImage').css('border-radius','0px'); 
      $('.ProductThumbImage img').css('border-radius','0px'); 
     } 
    }); 

HTML源代碼我工作：

<div class="productAttributeValue"> 
    <div class="productOptionViewRadio"> 
     <ul> 
     <li> 
      <label> 
      <input type="radio" class="validation" name="attribute[238]" value="125" checked="checked"/> 
      <span class="name">Rounded</span> 
     </label> 
     </li> 
      <li> 
       <label> 
      <input type="radio" class="validation" name="attribute[238]" value="126"/> 
      <span class="name">Square</span> 
     </label> 
      </li> 
    </ul> 
    </div> 
</div> 

感謝您的幫助提前。

Answer 1

試試您的jQuery的前兩行更改爲此：

$(".productOptionViewRadio input").click(function() { 
    var span_html = $(this).next().html(); 

現場演示展示在驚動了正確的跨度內容：http://jsfiddle.net/Czk2H/