Question

所以我遇到这个问题我的所有代码对我来说都是正确的，但是当我运行submit（）函数时，它不会根据所选的框更改图像。如果可以，请帮助，很乐意感谢任何帮助。

<!DOCTYPE html>
<html>

<head>
  <title>Computer System Order</title>
  <script>
    var imgArray = new Array(9);
    var index = 0;

    function submit() {
      if (document.ComputerForm.computerCase[0].checked) {
        alert("Box one selected");
        document.ComputerForm.caseimg.src = imgArray[0].src;

      } else if (document.ComputerForm.computerCase[1].checked) {
        alert("Box two selected");
        document.ComputerForm.caseimg.src = imgArray[1].src;
      } else {
        alert("Box three selected");
        document.ComputerForm.caseimg.src = imgArray[2].src;
      }
    }

    function startup() {
      imgArray[0] = new Image;
      imgArray[0].src = imgArray[0].alt = "desktopcase.jpg";
      imgArray[1] = new Image;
      imgArray[1].src = imgArray[1].alt = "minidesktop.jpg";
      imgArray[2] = new Image;
      imgArray[2].src = imgArray[2].alt = "fulltower.jpg";
      imgArray[3] = new Image;
      imgArray[3].src = imgArray[3].alt = "17monitor.jpg";
      imgArray[4] = new Image;
      imgArray[4].src = imgArray[4].src = "19monitor.jpg";
      imgArray[5] = new Image;
      imgArray[5].src = imgArray[5].src = "21monitor.jpg";
      imgArray[6] = new Image;
      imgArray[6].src = imgArray[6].src = "inkprinter.jpg";
      imgArray[7] = new Image;
      imgArray[7].src = imgArray[7].src = "laserprinter.jpg";
      imgArray[8] = new Image;
      imgArray[8].src = imgArray[8].src = "colorlaserprinter.jpg";
    }
  </script>
</head>

<body onLoad="startup()">
  <form name="ComputerForm">
    <table style="width:100%">
      <tr>
        <td>
          <p>
            <font face="Courier New">
    		<br>
    		<br>
    								<b>Computer Case Style:</b><br><input name="computerCase" type="radio">Desktop Case ($500.00)<br>
    								<input name="computerCase" type="radio">Mini-Tower ($600.00)<br>
    								<input name="computerCase" type="radio">Full Tower Case ($700.00)<br>
    								<br>
    								<br>
    								<b>Computer Monitor:</b><br><input name="monitor" type="radio">17" LCD Flat Screen ($250.00)<br>
    								<input name="monitor" type="radio">19" LCD Flat Screen ($300.00)<br>
    								<input name="monitor" type="radio">21" LCD Flat Screen ($350.00)<br>
    								<br>
    								<br>
    								<b>Computer Printer:</b><br><input name="printer" type="radio">Inkjet Printer ($100.00)<br>
    								<input name="printer" type="radio">Laser Printer ($250.00)<br>
    								<input name="printer" type="radio">Color Laser Printer ($350.00)<br>
    								<br>
    								<br>
    								<input type="button" value="Submit" onClick="submit()">
    							</font>
          </p>
        </td>
        <td name="tableOne">
          <img name="caseimg" alt="caseimg" width="125" height="125" src="desktopcase.jpg">
          <br>
          <img name="monitorimg" alt="monitoring" width="125" height="125" src="17monitor.jpg">
          <br>
          <img name="printerimg" alt="printerimg" width="125" height="125" src="inkprinter.jpg">
        </td>
        <td>
          <img name="caseimg" alt="caseimg" width="125" height="125" src="desktopcase.jpg">
        </td>
      </tr>
    </table>
  </form>
</body>

</html>

Answer 1

在JavaScript中，虽然您可以按照创建变量的方式初始化数组，但是如果您知道它们将会是什么，则只需将值放在方括号中。

var imgArray = ["desktopcase.jpg","minidesktop.jpg","fulltower.jpg","17monitor.jpg","19monitor.jpg","21monitor.jpg","inkprinter.jpg","laserprinter.jpg","colorlaserprinter.jpg"];

我使用jQuery来获取所有单选按钮，在它们上放置一个onClick事件监听器，然后是执行该操作的函数。

$('input[type="radio"]').on('click', radioIptFunc);

现在是有趣的部分。

function radioIptFunc(){
            var fileReg = /(\w*)/, //regular expression to get the file name without the extension from the imgArray array.
                gotVal = this.value, // get the radio input value.
                fileName = '', // sets up a variable to store the file name
                foundi = '', // sets up a variable to store found image file name from the array filter.
                nameAtr = this.name;  // gets the name from the clicked radio button.

                // this is the array filter that looks to see if the selected radio buttons value is in the array. the result is stored in the returned filter array (foundi).
                foundi = imgArray.filter(function( val ){
                    fileName = val.match(fileReg)[0];
                    return fileName === gotVal;
                });

            // switch statement that matches the selected product to the image/s that are to be changed.
            switch(nameAtr ){
                case 'computerCase':
                    $('[name="caseimg"]').attr('src', foundi);
                    $('[name="caseimg"]').attr('alt', gotVal);
                    break;
                case 'monitor':
                    $('[name="monitorimg"]').attr('src', foundi);
                    $('[name="monitorimg"]').attr('alt', gotVal);
                    break;
                case 'printer':
                    $('[name="printerimg"]').attr('src', foundi);
                    $('[name="printerimg"]').attr('alt', gotVal);
                    break;
                default:
                    console.log('no name found.');
            }
        }

明确定义时图像不会改变

1 个答案: