Javascript 将变量传递给另一页上的函数
我在一个网站上工作,并计划有它,使某些链接将有一个值集,这将改变什么容器显示时,页面加载。我怎样才能让链接传递一个用于onload函数的值呢 以下是我的HTML代码的模型:Javascript 将变量传递给另一页上的函数,javascript,jquery,html,Javascript,Jquery,Html,我在一个网站上工作,并计划有它,使某些链接将有一个值集,这将改变什么容器显示时,页面加载。我怎样才能让链接传递一个用于onload函数的值呢 以下是我的HTML代码的模型: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Lunch</title> <link rel="s
<!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"> </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>
您需要使用该URL的: 将变量传递到JavaScript函数时:
function tabulate(tabNum){
$('.recipe').each(function() {
if(tabNum==this.id){
this.style.display="block";
}
else{
this.style.display="none";
}
});
}
// 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";
}
});
}
//为GET参数设置一个对象
var$_GET={};
//查找并提取各种GET参数
if(document.location.toString().indexOf(“?”)!=-1){
var query=document.location.toString().replace(/^.*?\?/,'').replace(/#.*$/,'').split('&');
对于(var i=0,l=query.length;i我还没有测试过这一点,但是您应该能够通过PHP将get变量传递到tablate(),方法如下:
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);
});
函数表格(tabNum){
$('.recipe')。每个(函数(){
if(tabNum==this.id){
this.style.display=“block”;
}
否则{
this.style.display=“无”;
}
});
}
addEventListener('DOMContentLoaded',函数(evt){
变量id=;
表格(id);
});
快速提醒一下:你把“开胃菜”拼错了:我相信这会起作用,但我使用的托管网站不支持PHPSorry。我想我假设你有可用的PHP。在这种情况下,你可能需要发挥创意。没关系,我应该说我没有从Start访问PHP这帮了大忙!但是,我不需要$u get部分,而是分配了aux[1]直接调用tabNum。这取决于您在GET中传递了多少个参数,但如果只有一个参数,这将起作用。很高兴听到它帮助您:)这可能是我的错。我只是调用了一个JavaScript变量$\u GET
。您可以调用它任何东西,甚至是“thing”,它也会起作用。我只是使用了$\u GET
来表示symbolise说,它将返回与PHP基本相同的内容。上面的脚本根本不依赖PHP,只依赖JavaScript。如果你也使用PHP,可能会有某种冲突,因此可能值得更改变量名。似乎它可能与网站有关。我会问一下,看看会出现什么问题E
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);
});