Question

我想在页脚部分的h2中动态呈现部分id =“ zero”数据部分值。由于我所有页面的数据节值都不同，因此我希望我们可以将节id =“ zero”作为目标。这样，我只能在网站上使用一个页脚。我只是不精通javascript或jQuery以正确分配和调用。我知道有document.getElementById（'zero'），但是然后从data-section获取值并将其显示在我的H2中，我不清楚。

<section id="zero" class="section-wrap" data-section="Page Name"></section>

<section id="footer">
<h2></h2>
</section>

Answer 1

以下是一些应该有用的Javascript。

//Get the data-section value
let val = document.getElementById('zero').dataset.section; 

//find the first h2 inside footer section
let header = document.getElementById('footer').getElementsByTagName("h2")[0];

//set the value
header.textContent = val;

Answer 2

香草JS方式

function start(){

  // Find element with id="zero"
  const section = document.querySelector('#zero');

  // Find the h2 element nested inside an element with id="footer"
  const footer = document.querySelector('#footer h2');

  // Get value of data-section attribute
  const dataSectionValue = section.getAttribute('data-section');

  // Set value in your h2 tag
  footer.innerText = dataSectionValue;
}

window.onload = start;

jQuery方式

$(document).ready(function(){
  const section = $('#zero');

  $('#footer h2').text(section.data('section'));
});

根据元素ID从数据部分获取值

2 个答案: