如何调用多个查询选择器?

时间:2019-05-18 16:17:15

标签: javascript jquery-selectors

我正在使用ID调用Google表格中的数据,并使用 document.querySelectorAll向正数或负数添加正数或负数类。当前,这适用于#Title和#Title2。但我希望能够选择不同的ID并对它们执行其他操作。因此,例如,如果#Title3等于“ 2”,我希望它为正,并且不应用#Title和#Title 2具有的样式。我基本上想创建多个查询选择器。

我设法做到了,但是基本上是向Google表格分别提出了两个请求,但是它很慢,而且肯定有更好的方法吗? https://codepen.io/liamdthompson/pen/xNrBML?editors=1010

  function httpGetAsync(theUrl, callback)  {

  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
  if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
      callback(xmlHttp.responseText);
  }
  xmlHttp.open("GET", theUrl, true); // true for asynchronous
  xmlHttp.send(null);

  }


  httpGetAsync ('https://spreadsheet.glitch.me/?key=1mT_ILqpPtoCnWq5fEcBbVcgkKxcXN6uS9F2fsAO7imI', function(response) {
  var json = JSON.parse(response);

  document.getElementById("Title").innerHTML = json[0].Title;
  document.getElementById("Title2").innerHTML = json[1].Title2;
  document.getElementById("Title3").innerHTML = json[2].Title3;

let divs = Array.prototype.slice.call(document.querySelectorAll("#Title, #Title2"));

  // Loop the array
    divs.forEach(function(div){
        // Convert text to number and test for positive/negative
        if((+div.textContent) >= 0){
        div.classList.add("positive"); // Apply positive style
        } else {
        div.classList.add("negative"); // Apply negative style  
        }
    });  
    });

0 个答案:

没有答案