JavaScript与HTML关联问题：列表洗牌脚本在线可用本地无法运行

Let's break down why your script works in the browser console but fails when running locally with Notepad++—it all comes down to two key differences between the two environments:

1. Your Script Runs Before the DOM is Ready #

When you run code in the browser console, the page has already fully loaded, so all your elements (.btn, #Items) exist and can be found. But when you put your script in a local HTML file, if it's placed before your DOM elements (like in the <head> tag), the browser tries to execute the code before those elements are rendered. That means $(".btn") can't find the button to bind the click event to.

Fix: #

Either move your script to the end of the <body> tag (right before </body>), so it runs after all elements are loaded, or wrap your code in jQuery's $(document).ready() to ensure it waits for the DOM:

$(document).ready(function() {
  $(".btn").click(function() {
    var $nodes = $("#Items").find("li");
    shuffle($nodes, "Switch");
    $("#Items").append($nodes);
  });

  // Keep your shuffle function inside here too
  function shuffle(nodes, switchableSelector) {
    var length = nodes.length;
    var switchable = nodes.filter("." + switchableSelector);
    var switchIndex = [];
    $.each(switchable, function(index, item) {
      switchIndex[index] = $(item).index();
    });
    var switchLength = switchIndex.length;
    var randomPick, randomSwap;
    for (var index = length; index > 0; index--) {
      randomPick = switchIndex[Math.floor(Math.random() * switchLength)];
      randomSwap = nodes[index - 1];
      if($(randomSwap).hasClass(switchableSelector)) {
        nodes[index - 1] = nodes[randomPick];
        nodes[randomPick] = randomSwap;
      }
    }
    return nodes;
  }
});

2. jQuery Might Not Be Loading Locally #

The website you tested the console on probably already had jQuery loaded. But when running locally, if your Chrome is offline or the CDN link fails for any reason, jQuery won't load—and your code depends entirely on $ (jQuery's alias). You'll see an error like $ is not defined in the Chrome DevTools console (press F12 to check).

Fix: #

• Make sure you have an active internet connection to pull the jQuery CDN file.
• Or download a local copy of jQuery (version 3.3.1, matching your script), save it in the same folder as your HTML file, and replace the CDN link with a local path:

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

Full Working Local HTML Code #

Here's the complete, fixed version you can save in Notepad++ and run locally:

<!DOCTYPE html>
<html>
<head>
    <title>Shuffle List Items</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <h2>List of Items</h2>
    <ul id="Items">
        <li class="Switch">Item 1</li>
        <li class="Switch">Item 2</li>
        <li class="Switch">Item 3</li>
        <li class="Switch">Item4</li>
        <li class="Switch">Item 5</li>
        <li class="Switch">Item 6</li>
    </ul>
    <input type="button" class="btn" value="Shuffle" />

    <script type="text/javascript">
        $(".btn").click(function() {
            var $nodes = $("#Items").find("li");
            shuffle($nodes, "Switch");
            $("#Items").append($nodes);
        });

        function shuffle(nodes, switchableSelector) {
            var length = nodes.length;
            var switchable = nodes.filter("." + switchableSelector);
            var switchIndex = [];
            $.each(switchable, function(index, item) {
                switchIndex[index] = $(item).index();
            });
            var switchLength = switchIndex.length;
            var randomPick, randomSwap;
            for (var index = length; index > 0; index--) {
                randomPick = switchIndex[Math.floor(Math.random() * switchLength)];
                randomSwap = nodes[index - 1];
                if($(randomSwap).hasClass(switchableSelector)) {
                    nodes[index - 1] = nodes[randomPick];
                    nodes[randomPick] = randomSwap;
                }
            }
            return nodes;
        }
    </script>
</body>
</html>

Just save this as an .html file, open it in Chrome, and the shuffle button should work as expected!

内容的提问来源于stack exchange，提问作者Jon Harold