Question

我正在做更大的事情，但我将继续为我的问题提供一个更简单的例子。

假设我有两个html页面。在第一页，我有三个锚标签，都链接到第二页。

<a href="nextpage.html"> You clicked Red </a>
<a href="nextpage.html"> You clicked Blue </a>
<a href="nextpage.html"> You clicked Yellow </a>

第二页只有一个空的paragraf。

当您点击第一页上三个链接中的一个并转到第二页时，第二页应该包含相应点击的<a>标签的文本。

我在.js文件中编写了这样的javascript（Jquery）代码，并包含在两个页面的<head>中：

$(document).ready(function() {

  $('a').click(myFunction);
});


function myFunction() {

  var text = $(this).text();  
  $("p").html(text);
}

上面的代码应该有效，但遗憾的是它没有。我在console.log中运行一个测试，当我点击链接并获得定向到第二个时得到的结果是未定义的。我不确切知道为什么会发生这种情况，因为我在两个页面上都包含了javascript文件，并且应该互相交流。

Answer 1

为什么你有`undefined`

this是keyword in javascript，可以引用多种内容，具体取决于调用的位置和方式。

$(literally anything at all)是一个jQuery包装内部的任何内容。

在您的情况下，jQuery关键字旁边有一个this包装器。 this指的是它所在的函数，即myfunciton。

在jquery包装器中包含某些内容之后，jquery会添加一堆自己的函数，例如text()，html()，slideDown()等。

如果传入jquery包装器的任何内容都有textnode，那么text()函数将返回该节点的文本。但是，你传递了myfunction，它没有文本节点。

因此，$(myfunction).text()为undefined。

答案

您必须以某种方式在下一页上传递您想要的值作为请求的一部分。有人建议使用浏览器的localstorage。你可以做到这一点。或者您可以将值作为url参数传递。

如果您访问www.example.com/?foo=bar，那么当您加载该页面时，您将可以访问foo变量，其值为bar。

理解这一点，然后你可以编写一个jquery函数，它将url参数添加到你的<a>标签中，这样你的标记就会这样：

<a href="nextpage.html?variable=myspecialvalue">Whatever</a>

或者，您可以在模板中手动更改href值，如果这不是一个详尽的过程。

Answer 2

您的问题是因为就浏览器而言，第二页对第一页一无所知。如果要将颜色传递给下一页，则需要将其作为参数提供给下一页（例如查询字符串）。例如

<a href="nextpage.html?col=red"> You clicked Red </a>
<a href="nextpage.html?col=blue"> You clicked Blue </a>
<a href="nextpage.html?col=yellow"> You clicked Yellow </a>

然后使用以下内容获取查询字符串并显示颜色（getParameterByName的来源）：https://stackoverflow.com/a/901144/3713362：

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var colour = getParameterByName("col")
$("p").text(colour);

Answer 3

正如大家已经说过的，上面的代码不起作用。但是如果您打开使用localStorage，则可以将代码重写为

function myFunction() {

  var text = $(this).text();  

  localStorage.setItem('linkText', text);

}

在新页面上从localStorage读取数据 localStorage.getItem('linkText');

Answer 4

它应该不起作用。您分配html“p”的上下文位于第一页，而不是第二页。

您需要通过html属性传递数据（您希望在下一页显示的文本）。您可以在没有表单提交的情况下执行此操作，但这里有一个示例。

passing form data to another HTML page

如果这不是您想要的，您可以将表单设置为不可见，但答案是您需要将信息作为属性传递。

Answer 5

您可以通过查询字符串传递anchor元素的值，如下所示：

$('a').on('click', function(){
    var param = $(this).text();
    window.location.href = 'nextpage.html?pVal=' + param;
});

然后，在相应的下一页上：

$(document).ready(function(){
    var qString = window.location.href.slice(window.location.href.indexOf('=') + 1);
    $('p').text(qString);
});

在href页面上执行javascript

5 个答案:

为什么你有`undefined`

答案

在href页面上执行javascript

5 个答案:

为什么你有undefined

答案

为什么你有`undefined`