Question

~~在查看我的网站时在控制台中出现错误，尝试向其中添加jQuery，但是控制台在javascript文件中吐出了错误。~~

~~Uncaught ReferenceError: $ is not defined catergory.js:1~~

~~我查看了this answer（如下所示）并遵循了它的指导，但并没有解决问题。~~

下面列出的JavaScript代码似乎不起作用。

<html><head>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="css-js/design.css">
    <link rel="stylesheet" href="css-js/fly-in-animations.css">
    <link rel="stylesheet" href="css-js/design2.css">
    <script src="css-js/category.js"></script>
    <meta charset="utf-8">
    <title>PC Tech - Products</title>
</head>

<div class="category">
        <label class="pcpartstext" for="pcparts">Choose a category:</label>
            <select name="pcparts" id="pcparts">
                <option selected disabled>Choose One</option>
                    <optgroup label="Computer Hardware">
                      <option value="cpu">Central Processing Unit (CPU)</option>
                      <option value="cpucooler">CPU Cooler</option>
                      <option value="mobo">Motherboard</option>
                      <option value="ram">Random Access Memory (RAM)</option>
                      <option value="storage">Storage (HDDs/SSDs)</option>
                      <option value="gpu">Video Cards (GPU)</option>
                      <option value="psu">Power Supply (PSU)</option>
                      <option value="cases">Case/Chassis</option>
                    </optgroup>

                <optgroup label="Computer Accessories">
                  <option value="monitor">Monitors</option>
                  <option value="keyboardmousepad">Keyboard, Mouse & Mousepads</option>
                  <option value="speakerandheadset">Speakers & Headsets</option>
                </optgroup>
            </select>
    </div>

    <div class="product-info">

    </div>
```javascript
$('#pcparts').on('change', function() {
  if (this.value === 'cpu') {
    $('.product-info').html('<div class="details"><p class="info">CPU product info</p><button class="purchase">Purchase</button><div>')
  } else if (this.value === 'cpucooler') {
    $('.product-info').html('<div class="details"><p class="info">CPU Cooler product info</p><button class="purchase">Purchase</button><div>')
  }
});

Answer 1

您需要为每个选择添加更多选项。

$('#pcparts').on('change', function() {
  if (this.value === 'cpu') {
    $('.prodct-info').html('<div class="details"><p class="info">CPU product info</p><button class="purchase">Purchase</button><div>')
  } else if (this.value === 'cpucooler') {
    $('.prodct-info').html('<div class="details"><p class="info">CPU Cooler product info</p><button class="purchase">Purchase</button><div>')
  }
else if (this.value === 'mobo') {
    $('.prodct-info').html('<div class="details"><p class="info">CPU product info</p><button class="purchase">Purchase mobo</button><div>')
  }
//add more if else
});

JavaScript代码未显示在网站上

1 个答案: