带单选按钮的 Switch & Case 功能

Question

我已经阅读了各种问题和答案，但我的代码似乎有问题，我不确定为什么。

这就是我想要实现的目标。我有 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>

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

带单选按钮的 Switch & Case 功能

Switch & Case function with Radio Buttons

javascript

case

radio-group

switch-statement