我正在学习如何将javascript转换为jquery，但无法通过全局变量进行正确转换

Question

这是javascript中原始代码的摘录。对于全局变量，我将如何将它们转换为 jquery，以便我能够在代码后面重用它们，因为我继续将其全部转换为 jquery？

/* global variables tracking status of each form section */
var acresComplete = true;
var cropsComplete = true;
var monthsComplete = true;
var fuelComplete = true;
/* global variables referencing sidebar h2 and p elements */

var messageHeadElement = document.getElementById("messageHead");
var messageElement = document.getElementById("message");
/* global variables referencing fieldset elements */
var acresFieldset = document.getElementsByTagName("fieldset")[0];
var cropsFieldset = document.getElementsByTagName("fieldset")[1];
var monthsFieldset = document.getElementsByTagName("fieldset")[2];
var fuelFieldset = document.getElementsByTagName("fieldset")[3];
/* global variables referencing text input elements */
var monthsBox = document.getElementById("months");
var acresBox = document.getElementById("acres");
/* verify acres text box entry is a positive number */
function verifyAcres() {
var validity = true;
var messageText = "";
try {
if (!(acresBox.value > 0)) {
throw "Please enter a number of acres greater than 0.";
} 
}
catch(message) {
validity = false;
messageText = message;
acresBox.value = ""; // remove erroneous entry from input box
}
finally {
acresComplete = validity;
messageElement.innerHTML = messageText;
messageHeadElement.innerHTML = ""; // remove any former recommendation heading
testFormCompleteness();      
}
}

Answer 1

要使用 id 选择元素，可以使用$('#some-id')。在您的代码中，它将是

const messageHeadElement = $('#messageHead');
const messageElement = $('#message');

至于fieldsets，你可以像这样使用标签选择器：

const fieldsets = $('fieldset');
//.eq(0) returns a jQuery object while [0] will return the DOM element.
const acresFieldset = fieldsets.eq(0);

Answer 2

没关系，我想出了如何做我需要做的事情。我只需要删除全局变量，然后转到现在删除的全局变量的每个引用，并用一行 jquery 替换它来引用我需要进行的更改。在下面的代码片段中，我删除了侧边栏元素的变量，并使 jquery 代码在没有全局变量的情况下工作。

/* global variables tracking status of each form section */
var acresComplete = true;
var cropsComplete = true;
var monthsComplete = true;
var fuelComplete = true;

/* global variables referencing fieldset elements */
var acresFieldset = document.getElementsByTagName("fieldset")[0];
var cropsFieldset = document.getElementsByTagName("fieldset")[1];
var monthsFieldset = document.getElementsByTagName("fieldset")[2];
var fuelFieldset = document.getElementsByTagName("fieldset")[3];
/* global variables referencing text input elements */
var monthsBox = document.getElementById("months");
var acresBox = document.getElementById("acres");
/* verify acres text box entry is a positive number */
function verifyAcres() {
var validity = true;
var messageText = "";
try {
if (!(acresBox.value > 0)) {
throw "Please enter a number of acres greater than 0.";
} 
}
catch(message) {
validity = false;
messageText = message;
acresBox.value = ""; // remove erroneous entry from input box
}
finally {
acresComplete = validity;
$("#message").text(messageText);
$("#messageHead").text("");
testFormCompleteness();      
}
}