带有单选按钮的开关和外壳功能答案

【问题标题】：Switch & Case function with Radio Buttons带有单选按钮的开关和外壳功能
【发布时间】：2017-03-31 18:47:34
【问题描述】：

我已阅读各种问题和答案，但我的代码似乎有问题，我不确定原因。

这是我想要达到的目标。我有 3 个不同的单选按钮组。每次单击不同的单选按钮时，我都希望显示与 3 个单选组的值相对应的单张图片。

我有一张所有 8 种组合的图片。为了方便我确保它正常工作，我所拥有的图像实际上是由单选按钮选中的 3 个项目的名称。打开页面，您会看到 Wood、Thumb Turns 和 Face Mounted 已被选中，因此下图显示了包含这些字词的图片。如果我点击铝，图片应该会变成铝，拇指转动和面部安装。

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

<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>

【问题讨论】：

在switch（lockingValue）中，case值不应该是THUMB和KEY（而不是FWM和BJM）吗？
我已经在上面进行了编辑，但仍然遇到同样的问题。
尝试更改事件而不是单击以检测输入元素的更改。

标签： javascript switch-statement case radio-group

【解决方案1】：

在尝试检索任何元素之前，您需要确保页面的 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>

【讨论】：

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