Question

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

这是我试图实现的目标。我有3个不同的单选按钮组。每次我点击一个不同的单选按钮时，我想要显示一张与3个无线电组的值相对应的图片。

我有所有8种组合的照片。为了方便我确保它正常工作，我所拥有的图像实际上是由单选按钮检查的3个项目的名称。打开页面，您将看到Wood，Thumb turn和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代码。

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

＆＃13;

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

＆＃13;

开关＆amp;带有单选按钮的案例功能

1 个答案: