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

Question

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

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

这该怎么做？

这是 第二页的链接
第三页

HTML：

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

Answer 1

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

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

Answer 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>

Answer 3

使用您在普通 js 中给出标题的类使用以下内容。

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

如果你使用 jQuery 那么它的

$('.entry-title').text

希望有帮助。

Answer 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 源包含到您的页面中。

Answer 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);

Answer 6

如果您使用的是 Jquery，那么我建议您将 id 赋予您的 H1 标签，假设您的 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);

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