Question

我具有将公历日期转换为贾拉利日期的功能，它只能用于一个标签，但是我在一页中没有指定数量的此标签，并且必须转换所有主题。

我知道getElementById一次支持一个名称，并且尝试使用querySelector和getElementsByClassName却无法正常工作

function gregorian_to_jalali(gy, gm, gd) {
  g_d_m = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
  if (gy > 1600) {
    jy = 979;
    gy -= 1600;
  } else {
    jy = 0;
    gy -= 621;
  }
  gy2 = (gm > 2) ? (gy + 1) : gy;
  days = (365 * gy) + (parseInt((gy2 + 3) / 4)) - (parseInt((gy2 + 99) / 100)) + (parseInt((gy2 + 399) / 400)) - 80 + gd + g_d_m[gm - 1];
  jy += 33 * (parseInt(days / 12053));
  days %= 12053;
  jy += 4 * (parseInt(days / 1461));
  days %= 1461;
  if (days > 365) {
    jy += parseInt((days - 1) / 365);
    days = (days - 1) % 365;
  }
  jm = (days < 186) ? 1 + parseInt(days / 31) : 7 + parseInt((days - 186) / 30);
  jd = 1 + ((days < 186) ? (days % 31) : ((days - 186) % 30));
  return [jy, jm, jd];
}

const dateElement = document.querySelector('date')
const year = Number(dateElement.dataset.year) // "2019"
const month = Number(dateElement.dataset.month) // "2"
const day = Number(dateElement.dataset.day) // "6"
dateElement.textContent = gregorian_to_jalali(year, month, day).join('/')

<date data-year="2019" data-month="5" data-day="7"></date>
<date id="date" class="date" data-year="2019" data-month="2" data-day="7"></date>
<div id="date" class="date" data-year="2019" data-month="2" data-day="8"></div>
<div id="date" class="date" data-year="2019" data-month="2" data-day="9"></div>
<div id="date" class="date" data-year="2019" data-month="2" data-day="10"></div>

Answer 1

您的代码有一些问题：

没有date元素之类的东西。您应该改用div。
id（标识符）必须是其元素唯一的，不能在其他元素上重复。相反，您应该使用class。目前，您所有元素上都有一个date类，期望第一个。因此，如果您将date类添加到第一个元素。完成后，您可以使用document.getElementsByClassName()获取页面上所有具有类date的元素。

document.getElementsByClassName()将返回HTMLCollection，因此您可以使用spread syntax（...）将其转换为数组。将您的集合变成一个数组将使您可以使用.forEach遍历它。使用.forEach可以访问类date的每个元素，然后可以使用该元素从中提取其data-*属性。

请参见下面的工作示例：

function gregorian_to_jalali(gy, gm, gd) {
  g_d_m = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
  if (gy > 1600) {
    jy = 979;
    gy -= 1600;
  } else {
    jy = 0;
    gy -= 621;
  }
  gy2 = (gm > 2) ? (gy + 1) : gy;
  days = (365 * gy) + (parseInt((gy2 + 3) / 4)) - (parseInt((gy2 + 99) / 100)) + (parseInt((gy2 + 399) / 400)) - 80 + gd + g_d_m[gm - 1];
  jy += 33 * (parseInt(days / 12053));
  days %= 12053;
  jy += 4 * (parseInt(days / 1461));
  days %= 1461;
  if (days > 365) {
    jy += parseInt((days - 1) / 365);
    days = (days - 1) % 365;
  }
  jm = (days < 186) ? 1 + parseInt(days / 31) : 7 + parseInt((days - 186) / 30);
  jd = 1 + ((days < 186) ? (days % 31) : ((days - 186) % 30));
  return [jy, jm, jd];
}


const dateElements = document.getElementsByClassName("date"); // get all elements with the class "date"
[...dateElements].forEach(function(dateElement) { // loop through each element, where dateElement is the current node
  const year = Number(dateElement.dataset.year);
  const month = Number(dateElement.dataset.month);
  const day = Number(dateElement.dataset.day);
  dateElement.textContent = gregorian_to_jalali(year, month, day).join('/');
})

<div class="date" data-year="2019" data-month="5" data-day="7"></div>
<br />
<div class="date" data-year="2019" data-month="2" data-day="7"></div>
<br />
<div  class="date" data-year="2019" data-month="2" data-day="8"></div>
<br />
<div class="date" data-year="2019" data-month="2" data-day="9"></div>
<br />
<div class="date" data-year="2019" data-month="2" data-day="10"></div>

Answer 2

您在代码中以及在DOM中都犯了错误，因为您没有两个具有相同标识符的元素。 querySelector返回找到的第一个元素，而必须使用querySelectorAll，它将返回一个数组。

function gregorian_to_jalali(gy,gm,gd){
 g_d_m=[0,31,59,90,120,151,181,212,243,273,304,334];
 if(gy > 1600){
  jy=979;
  gy-=1600;
 }else{
  jy=0;
  gy-=621;
 }
 gy2=(gm > 2)?(gy+1):gy;
 days=(365*gy) +(parseInt((gy2+3)/4)) -(parseInt((gy2+99)/100)) +(parseInt((gy2+399)/400)) -80 +gd +g_d_m[gm-1];
 jy+=33*(parseInt(days/12053)); 
 days%=12053;
 jy+=4*(parseInt(days/1461));
 days%=1461;
 if(days > 365){
  jy+=parseInt((days-1)/365);
  days=(days-1)%365;
 }
 jm=(days < 186)?1+parseInt(days/31):7+parseInt((days-186)/30);
 jd=1+((days < 186)?(days%31):((days-186)%30));
 return [jy,jm,jd];
}

var dateElement = document.querySelectorAll('.date');
for(var i = 0; i < dateElement.length; i++) {
  const year = Number(dateElement[i].dataset.year); // "2019"
  const month = Number(dateElement[i].dataset.month); // "2"
  const day = Number(dateElement[i].dataset.day); // "6"
  dateElement[i].textContent = gregorian_to_jalali(year, month, day).join('/');
}

<div class="date" data-year="2019" data-month="5" data-day="7"></div>
<hr>
<div class="date" data-year="2019" data-month="2" data-day="7"></div>
<hr>
<div class="date" data-year="2019" data-month="2" data-day="8"></div>
<hr>
<div class="date" data-year="2019" data-month="2" data-day="9"></div>
<hr>
<div class="date" data-year="2019" data-month="2" data-day="10"></div>

querySelector（GetElementByID）-多个ID

2 个答案: