如何使用 JS 获取 h1 标签的值？答案

【问题标题】：How to get the value of h1 tag using JS?如何使用 JS 获取 h1 标签的值？
【发布时间】：2016-05-04 03:31:33
【问题描述】：

我有 3 个页面，其中 2 个页面是 WordPress 页面，另外 1 个页面是带有表单的自定义页面模板。这 2 个页面是使用 wp-job manager 插件创建的。第一页有一个下拉菜单并包含工作列表。第二页是工作描述。

现在，我想在用户单击输入按钮后获取第二页上 h1 标记的值并将其传递到第三页并使用 JS 将其显示在一个输入文本框（位置输入文本框）中。

如何做到这一点？

HTML：

<header class="entry-header">
    <h1 class="entry-title">Collections Trainer</h1>
</header>

【问题讨论】：

$(".entry-title").text 会给你h1值
如何传递h1的值？

标签： javascript jquery html wordpress

【解决方案1】：

Vanilla JavaScript 解决方案（无需框架）：

var h1Text = document.querySelector(".entry-title").textContent;

【讨论】：

【解决方案2】：

你可以使用 jquery 吗？如果是这样，请在单击 jquery 中的按钮时获取 h1 值，然后使用查询字符串发送到其他页面。

已编辑

将页面中的 jquery 文件添加到用户 jquery 功能。您需要将函数放在 $(document).ready() 函数中，以便将函数附加到对象中。

您可以在https://learn.jquery.com/了解更多关于 jquery 的信息。

<script src="https://code.jquery.com/jquery-2.2.0.min.js"/>
<script>
  $(document).ready(function(){
   $('.application_button').click(function(){
        var headervalue = $(".entry-title").text();
        window.location = "http://homecredit.ph/testEnvironment/4537-2/?position="+headervalue;
    });
});
</script>

【讨论】：

我会把jquery放在第二页还是第三页？
第二页。然后从第三页的查询字符串中获取值。
我将该脚本放在第二页，但是当我点击按钮时，什么也没有发生，也没有重定向
你把脚本放在document.ready函数里了吗？你是否包含了 jquery 源代码？

【解决方案3】：

使用你在普通js中给标题的类使用以下。

var x = document.getElementsByClassName('entry-title').value;
console.log(x); //outputs collections trainer

如果你使用的是 jQuery，那么它的

$('.entry-title').text

希望对您有所帮助。

【讨论】：

$('.entry-title').text();你错过了圆括号。

【解决方案4】：

如果您只想在单击按钮后获取 h1 值，则需要为按钮设置 onclick。

$.(document).ready(function(){
var header1Text ='';
 $('.application_button').onclick(function(){
   header1Text = $('h1').html();
  });
//To display it in whichever textbox you want:
$('#GivesomeIDtoYourTextBox').val(header1Text);
});

PS：您还需要在页面中包含 jquery 源代码。

【讨论】：

【解决方案5】：

jQuery：获取 H1 值

 var gValue=jQuery("header h1.entry-title").text();
    alert(gValue);

由于您需要在其他页面上获取值，因此您可以通过 QueryString 或使用 HTML5 LocalStorage 发送值示例代码：

var first_page_h1_Value=jQuery("header h1.entry-title").text();
var second_page_h1_Value=jQuery("header h1.entry-title").text();

localStorage.setItem("FirstPage", first_page_h1_Value);
localStorage.setItem("SecondPage", second_page_h1_Value);

在第三页你可以得到两个页面的标题文本

 alert(localStorage.FirstPage);
 alert(localStorage.SecondPage);

【讨论】：

我收到“未定义”警报

【解决方案6】：

如果您使用的是 Jquery，那么我建议您为 H1 标签提供 id，假设您的 H1 标签的 id 是“h1Title”。 HTML：

<h1 id="h1Title">Heading here</h1>

然后得到你在JQuery中写的标题：

var title = $("#h1Title").text();
//To Check Whether you are getting text or not
console.log("title :"+title);

这样，您将获得标题的文本。

【讨论】：