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

Question

Here is an excerpt of the original code in javascript. For the global variables, how would I convert those to jquery so I am able to resuse them later in the code, as I continue to convert it all over to 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

To select elements using ids, you can use $('#some-id') . In your code, it would be

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

As for the fieldset s, you can use the tag selector like so:

const fieldsets = $('fieldset');

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

Answer 2

Nevermind, I figured out how to do what I needed to do. I needed to just delete the global variables and then go to each reference of the now deleted global variable and replacec that with one line of jquery to reference the change I need to make. In the below snippet, I have deleted the variables for the sidebar elements and have made the jquery code work without a global variable.

/* 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();      
   }
}