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

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

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

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

相关内容

最新更新

热门标签：