带开关按钮的开关和外壳功能

我已经阅读了各种问题和答案，但我似乎遇到了我的代码问题，我不确定为什么。带开关按钮的开关和外壳功能

这是我试图实现的。我有3个不同的单选按钮组。每次我点击一个不同的单选按钮时，我想要显示一个单独的图片，对应3个广播组的值。

我对所有8种组合都有图片。为了方便我确保它正常工作，我拥有的图像实际上是由单选按钮检查的3个项目的名称。打开页面，你会看到木材，拇指转弯和面部安装，所以下面的图片显示了这些词的图片。如果我点击铝，图片应该变成铝，拇指转弯，并且安装面部。

以下是我所拥有的。任何帮助将不胜感激。

<html> 
<head> 
<script type='text/javascript'> 
$("input:radio[name=guides], input:radio[name=locking], input:radio[name=mounting]").click(function() { 
    var guidesValue = $("input:radio[name=guides]:checked").val(); 
    var lockingValue = $("input:radio[name=locking]:checked").val(); 
    var mountingValue = $("input:radio[name=mounting]:checked").val(); 


    var image_name = ""; 

    switch (guidesValue) { 
     case 'WOOD': 
      image_name += "Newfolder/WOOD"; 
      break; 
     case 'ALUMINUM': 
      image_name += "Newfolder/ALUMINUM"; 
      break; 
     default: 
      image_name += "Newfolder/WOOD"; 
      break; 
    } 

    switch (lockingValue) { 
     case 'THUMB': 
      image_name += "_THUMB"; 
      break; 
     case 'KEY': 
      image_name += "_KEY"; 
      break; 
     default: 
      image_name += "_THUMB"; 
      break; 
    } 

    switch (mountingValue) { 
     case 'FWM': 
      image_name += "_FWM.jpg"; 
      break; 
     case 'BJM': 
      image_name += "_BJM.jpg"; 
      break; 
     default: 
      image_name += "_FWM.jpg"; 
      break; 
    } 

    $('#formula').attr('src', image_name); 
}); 
</script> 
</head> 

<body> 

<table border="1" width="30%" cellspacing="5" cellpadding="3"> 
    <tr> 
    <td width="100%"> 
    <input type="radio" name="guides" value="WOOD" id="wood" checked> Wood Guides 
    <p><input type="radio" name="guides" value="ALUMINUM" id="aluminum"> Aluminum Guides</p> 
    </td> 
    <tr> 
    <td width="100%"> 
    <input type="radio" name="locking" value="THUMB" id="THUMBTURN" checked> Thumb Turn Lock 
    <p><input type="radio" name="locking" value="KEY" id="KEYCYLINDER"> Key Cylinder Lock</p> 
    </td> 
    <tr> 
    <td width="100%"> 
    <input type="radio" name="mounting" value="FWM" id="FWMounted" checked> Face Wall Mounted 
    <p><input type="radio" name="mounting" value="BJM" id="BJMounted"> Between Jamb Mounted</p> 
    </td> 
    </tr> 

</table> 

<p> 

<img src="Newfolder/WOOD_THUMB_FWM.jpg" name="formula" id="formula" width="384" height="96"> 

</body> 

</html>

来源

2017-03-31 JonP

在开关（lockingValue），不应该的情况下的值是THUMB和键（而不是FWM和BJM）？ – airos

我已经做了上面的编辑，但仍然有同样的问题。 – JonP

尝试更改事件而不是点击以检测输入元素中的更改。 – airos

在尝试检索任何元素之前，您需要确保页面的DOM树已准备就绪。

要做到这一点，请将一个回调函数，一旦页面加载它应该被称为（window.load事件）或DOM树就绪（$(document).ready()）

当然，你还需要添加里面的代码jQuery代码。

我已经修改了您的代码以便更轻松地检查更改，以便登录到控制台中的图像名称。

<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script type='text/javascript'> 
 
    $(document).ready(function() { 
 
     $("input:radio[name=guides], input:radio[name=locking], input:radio[name=mounting]").click(function() { 
 
     var guidesValue = $("input:radio[name=guides]:checked").val(); 
 
     var lockingValue = $("input:radio[name=locking]:checked").val(); 
 
     var mountingValue = $("input:radio[name=mounting]:checked").val(); 
 

 

 
     var image_name = ""; 
 

 
     switch (guidesValue) { 
 
      case 'WOOD': 
 
      image_name += "Newfolder/WOOD"; 
 
      break; 
 
      case 'ALUMINUM': 
 
      image_name += "Newfolder/ALUMINUM"; 
 
      break; 
 
      default: 
 
      image_name += "Newfolder/WOOD"; 
 
      break; 
 
     } 
 

 
     switch (lockingValue) { 
 
      case 'THUMB': 
 
      image_name += "_THUMB"; 
 
      break; 
 
      case 'KEY': 
 
      image_name += "_KEY"; 
 
      break; 
 
      default: 
 
      image_name += "_THUMB"; 
 
      break; 
 
     } 
 

 
     switch (mountingValue) { 
 
      case 'FWM': 
 
      image_name += "_FWM.jpg"; 
 
      break; 
 
      case 'BJM': 
 
      image_name += "_BJM.jpg"; 
 
      break; 
 
      default: 
 
      image_name += "_FWM.jpg"; 
 
      break; 
 
     } 
 

 
     $('#formula').attr('src', image_name); 
 
     console.log(image_name); 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 

 
    <table border="1" width="30%" cellspacing="5" cellpadding="3"> 
 
    <tr> 
 
     <td width="100%"> 
 
     <input type="radio" name="guides" value="WOOD" id="wood" checked> Wood Guides 
 
     <p><input type="radio" name="guides" value="ALUMINUM" id="aluminum"> Aluminum Guides</p> 
 
     </td> 
 
     <tr> 
 
     <td width="100%"> 
 
      <input type="radio" name="locking" value="THUMB" id="THUMBTURN" checked> Thumb Turn Lock 
 
      <p><input type="radio" name="locking" value="KEY" id="KEYCYLINDER"> Key Cylinder Lock</p> 
 
     </td> 
 
     <tr> 
 
      <td width="100%"> 
 
      <input type="radio" name="mounting" value="FWM" id="FWMounted" checked> Face Wall Mounted 
 
      <p><input type="radio" name="mounting" value="BJM" id="BJMounted"> Between Jamb Mounted</p> 
 
      </td> 
 
     </tr> 
 

 
    </table> 
 

 
    <p> 
 

 
    <img src="Newfolder/WOOD_THUMB_FWM.jpg" name="formula" id="formula" width="384" height="96"> 
 

 

 
</body> 
 

 
</html>

来源

2017-04-02 20:20:49 airos

airos谢谢！这已经解决了我的问题，它完全符合我的要求。 – JonP

带开关按钮的开关和外壳功能

回答

相关问题