JavaScript код не отображается на сайте - PullRequest
0 голосов
/ 18 июня 2020

Получение ошибки в консоли при просмотре моего веб-сайта, попытка добавить в него jQuery, но консоль выдает ошибку в файле javascript.

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

I просмотрел этот ответ (данный ниже) и следовал его указаниям, но он не решил проблему.

Код 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>')
  }
});

1 Ответ

0 голосов
/ 18 июня 2020

Вам нужно добавить больше опций для каждого выбора.

$('#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
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...