将变量传递给另一个页面上的函数

Posted

技术标签:

【中文标题】将变量传递给另一个页面上的函数【英文标题】:Passing variable to function on another page 【发布时间】:2017-11-15 20:06:39 【问题描述】:

我正在开发一个网站,并计划拥有它,以便为某些链接设置一个值,这将改变页面加载时显示的容器。我将如何拥有它,以便链接传递一个用于 onload 函数的值?

这是我的 html 代码的模型:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Lunch</title>
        <link rel="stylesheet" type="text/css" href="style.css">
                <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="script.js"></script>
    </head>
<body onload="navBar(); dateChange(); tabulate(0);">
    <nav>
        <ul>
            <li><a href="appy.html">Appitizers</a></li>
            <li><a href="break.html">Breakfast</a></li>
            <li><a href="lunch.html">Lunch</a></li>
            <li><a href="dinner.html">Dinner</a></li>
            <li><a href="dessert.html">Dessert</a></li>
            <li><a href="special.html">Ten-Course Dinner</a></li>
            <li><a href="share.html">Send in your Recipes!</a></li>
        </ul>
    </nav>
    <div class="main">
    <div class="box">
        <ul>
            <li><a onclick="tabulate(this.id);" id="1">Chicken Clubhouse Sandwiches</a></li>
            <li><a onclick="tabulate(this.id);" id="2">Smokey Tomato Soup</a></li>
        </ul>
    </div>

    <div id="0" class="recipe" style="display: block;">
        <div class="tabs">
            <a class="tab">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
        </div>
        <div class="page">
            <p>The recipes you'll find here are ones you can use to impress guests at your next get together</p>
        </div>
    </div> <!--recipe card end-->
    <div class="recipe" id="1">
        <h1>Chicken Clubhouse Sandwiches</h1>
    </div> <!--recipe card end-->   
    <div class="recipe" id="2">
        <h1>Smokey Tomato Soup</h1>
    </div> <!--recipe card end-->

    </div>
</body>
</html>

这是我的制表功能:

function tabulate(tabNum)
$('.recipe').each(function() 
    if(tabNum==this.id)
        this.style.display="block";
    
    else
        this.style.display="none";
    
);


【问题讨论】:

请注意:您拼错了“开胃菜”:) 【参考方案1】:

您需要使用 URL 的 GET parameters:

lunch.html?item=2

结合将变量传递给 javascript 函数:

// Set up an object for GET parameter
var $_GET = ;

// Find and extract the various GET parameters
if(document.location.toString().indexOf('?') !== -1) 
    var query = document.location.toString().replace(/^.*?\?/, '').replace(/#.*$/, '').split('&');
    for(var i=0, l=query.length; i<l; i++) 
       var aux = decodeURIComponent(query[i]).split('=');
       $_GET[aux[0]] = aux[1];
    


// Target a specific get parameter, given the GET parameter name
var tabNum = $_GET['item']; // Comes through as '2' in this example

// Pass the parameter into the function
function tabulate(tabNum)
  $('.recipe').each(function() 
    if(tabNum==this.id)
        this.style.display="block";
    
    else
        this.style.display="none";
    
  );

请参阅 this postthis post 以获取更多参考。

希望这会有所帮助! :)

【讨论】:

这帮助很大!但是,我不需要 $_GET 部分,而是直接将 aux[1] 分配给 tabNum。 这取决于您在 GET 中传递了多少个参数,但是是的,如果只有一个参数,这将起作用。很高兴听到它对您有所帮助:) 这可能是我的错。我只是简单地调用了一个 JavaScript 变量$_GET。你可以把它叫做任何东西,甚至是“东西”,它的工作原理是一样的。我只是使用$_GET 来表示它将返回与 php 基本相同的东西。上面的脚本根本不依赖 PHP——只依赖于 JavaScript。如果您也在使用 PHP,可能会发生某种冲突,因此可能值得更改变量名。 看来可能与网站有关。我会在那里问,看看可能是什么问题【参考方案2】:

我还没有对此进行测试,但是您应该可以通过 PHP 将 GET 变量传递给 tabulate(),方法如下:

function tabulate(tabNum)
    $('.recipe').each(function() 
        if(tabNum==this.id)
            this.style.display="block";
        
        else
            this.style.display="none";
        
    );

window.addEventListener('DOMContentLoaded', function(evt) 
    var id = <?php echo htmlspecialchars($_GET['id'], ENT_COMPAT, 'utf8'); ?>;
    tabulate(id);
);

【讨论】:

我确信这会起作用,但我使用的托管站点不支持 PHP 很抱歉。我想我假设你有 PHP 可用。在这种情况下,您可能需要发挥创造力。 没关系,我应该说我一开始就没有PHP访问权限

以上是关于将变量传递给另一个页面上的函数的主要内容,如果未能解决你的问题,请参考以下文章

如何使用html将一个页面的值传递给另一个页面

我正在尝试使用 WebView 登录页面将控制权传递给另一个 ViewController

REACTJS 和 API 将 Api 的值传递给另一个页面

将变量名称传递给另一个函数中的 dplyr 函数会返回找不到对象错误

将变量传递给另一个 JAVA 类中的主函数

将一个函数中创建的 PHP 变量传递给另一个函数