Question

我最近正在学习如何托管本地Web服务器，最近我一直在处理一个非常令人沮丧的问题。我的浏览器可以看到我在HTML和CSS文件中所做的更改，但根本不会响应我的JS文件。它们都位于index.js，index.html和main.css下的同一文件夹中。当我什至不知道自己在做什么时，这让我感到非常沮丧，很难练习。有人看到我的代码有任何问题可以解释这一点吗？我禁用了缓存，所以我知道不是这样。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Shopping List</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="container">
        <h1>Shopping List</h1>

        <form id="js-shopping-list-form">
            <label for="shopping-list-entry">Add an item</label>
            <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
            <button type="submit">Add item</button>
        </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="index.js"></script>
</body>
</html>

JS：

'use strict';
/* global $ */

function addItem(){
  $('input').prop('required');
  $('#js-shopping-list-form').submit(event => {
    event.preventDefault(); 
    const userTextElement = $(event.currentTarget).find('#shopping-list-entry');

  helpAdd(userTextElement.val());
});
}

function checkItem(){
  $('.shopping-list').on('click', '.shopping-item-toggle', event => {
  event.preventDefault();   
});
}

function deleteItem(){
  $('.shopping-list').on('click', '.shopping-item-delete', event => {
  event.preventDefault();       
});
}

function helpCheck(item) {
  if($(item.closest('li')).find('>:first-child').attr('class') === 'shopping- 
  item shopping-item__checked')
  {
  $(item.closest('li')).find('>:first-child').attr('class','shopping-item');
  }   
 else{
 $(item.closest('li')).find('>:first-child').attr('class','shopping-item 
 shopping-item__checked');
 }
}

function helpAdd(itemName){
  $( '.shopping-list').append(` <li>
  <span class="shopping-item">${itemName}</span>
  <div class="shopping-item-controls">
  <button class="shopping-item-toggle">
    <span class="button-label">check</span>
  </button>
  <button class="shopping-item-delete">
    <span class="button-label">delete</span>
  </button>
 </div>
</li>`);
}

$(addItem);
$(checkItem);
$(deleteItem);

Answer 1

如果您使用的是chrome：转到public static void factorialNumber() { int factorial = 1; boolean valid; int number = 0; do { System.out.println("Please enter a number: "); number = sc.nextInt(); valid = number > 0; if (!valid) { System.out.println("ERROR Please enter a positive number"); } } while (!valid); if (number < 0) { System.out.println("***Error***: Please enter a positive number ... "); factorialNumber(); } if (number > 0) { System.out.print("The factorial is: " + number + " "); } for (int i = 1; i <= number; i++) { factorial *= i; if ((number - i) > 0) { System.out.print("x " + (number - i) + " "); } } System.out.println("= " + factorial); }

然后在打开FlinkKafkaProducer011<Integer> kafkaProducer = new FlinkKafkaProducer011<>( topic, new SimpleStringSchema, properties, Semantic.EXACTLY_ONCE);窗口的情况下刷新浏览器。

Answer 2

您似乎丢失了我刚刚添加为<ul class="shopping-list"></ul>的类“购物清单”中的元素

请尝试使用此代码

'use strict';
/* global $ */

function addItem() {
    $('input').prop('required');
    $('#js-shopping-list-form').submit(event => {
        event.preventDefault();
        const userTextElement = $(event.currentTarget).find('#shopping-list-entry');

        helpAdd(userTextElement.val());
    });
}

function checkItem() {
    $('.shopping-list').on('click', '.shopping-item-toggle', event => {
        event.preventDefault();
    });
}

function deleteItem() {
    $('.shopping-list').on('click', '.shopping-item-delete', event => {
        event.preventDefault();
    });
}

function helpCheck(item) {
    if ($(item.closest('li')).find('>:first-child').attr('class') === 'shopping-item shopping - item__checked')
    {
        $(item.closest('li')).find('>:first-child').attr('class', 'shopping-item');
    }   
 else {
        $(item.closest('li')).find('>:first-child').attr('class', 'shopping-item shopping - item__checked');
 }
}

function helpAdd(itemName) {
    $('.shopping-list').append(` <li>
  <span class="shopping-item">${itemName}</span>
  <div class="shopping-item-controls">
  <button class="shopping-item-toggle">
    <span class="button-label">check</span>
  </button>
  <button class="shopping-item-delete">
    <span class="button-label">delete</span>
  </button>
 </div>
</li>`);
}

$(addItem);
$(checkItem);
$(deleteItem);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <h1>Shopping List</h1>

    <form id="js-shopping-list-form">
        <label for="shopping-list-entry">Add an item</label>
        <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
        <button type="submit">Add item</button>
    </form>

    <ul class="shopping-list"></ul>
</div>

浏览器不会反映JS文件中的更改

2 个答案: