我如何避免 jquery ajax 中的变量冲突
how do i avoid variables conflicts in jquery ajax
我有这个功能,我曾经通过 jquery ajax 获取一些页面,它还负责活动 link 导航状态。下面是具有两个相同函数的代码,它们应该从两个不同的目录中获取页面,正如您看到的两个函数都使用相同的变量名 "linkClicked" 问题是只有第一个函数在工作,如果我删除了第一个函数,那么第二个函数功能开始工作。我想说的是这两个功能不能同时工作。我知道我不应该两次使用相同的变量名,但将变量名更改为其他名称也不起作用!
$(function() {
$('header nav a').click(function() {
var $linkClicked = $(this).attr('href');
document.location.hash = $linkClicked;
var $Top_albumsRoot = $linkClicked.replace('#Top_albums', '');
if (!$(this).hasClass("active")) {
$("header nav a").removeClass("active");
$(this).addClass("active");
$.ajax({
type: "POST",
url: "load.php",
data: 'Top_albums='+$Top_albumsRoot,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#main-content').html(msg);
$('#main-content section').hide().fadeIn();
}
}
});
}
else {
event.preventDefault();
}
});
var hash = window.location.hash;
hash = hash.replace(/^#/, '');
switch (hash) {
case 'page2' :
$("#" + hash + "-link").trigger("click");
break;
case 'Top_albums_Pop' :
$("#" + hash + "-link").trigger("click");
break;
case 'page4' :
$("#" + hash + "-link").trigger("click");
break;
}
});
$(function() {
$('header nav a').click(function() {
var $linkClicked = $(this).attr('href');
document.location.hash = $linkClicked;
var $pageRoot = $linkClicked.replace('#page', '');
if (!$(this).hasClass("active")) {
$("header nav a").removeClass("active");
$(this).addClass("active");
$.ajax({
type: "POST",
url: "load2.php",
data: 'page='+$pageRoot,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#main-content').html(msg);
$('#main-content section').hide().fadeIn();
}
}
});
}
else {
event.preventDefault();
}
});
var hash = window.location.hash;
hash = hash.replace(/^#/, '');
switch (hash) {
case 'page2' :
$("#" + hash + "-link").trigger("click");
break;
case 'page3' :
$("#" + hash + "-link").trigger("click");
break;
case 'page4' :
$("#" + hash + "-link").trigger("click");
break;
}
});
这是两个 php 文件,分别 link 编辑到这些函数 load.php 和 load2.php
<!--load.php-->
<?php
if(!$_POST['Top_albums']) die("0");
$page = (int)$_POST['Top_albums'];
if(file_exists('Top-albums/Top_albums'.$page.'.html'))
echo file_get_contents('Top-albums/Top_albums'.$page.'.html');
else echo 'There is no such page!';
?>
<!--load2.php-->
<?php
if(!$_POST['page']) die("0");
$page = (int)$_POST['page'];
if(file_exists('pages/page'.$page.'.html'))
echo file_get_contents('pages/page'.$page.'.html');
else echo 'There is no such page!';
?>
最后这是导航菜单
<li><a href="#page1" class="active" id="page1-link">Page 1</a></li>
<li><a href="#page2" id="page2-link">Page 2</a></li>
<li><a href="#Top_albums3" id="page3-link">Page3</a></li>
<li><a href="#page4" id="page4-link">Page 4</a></li>
所以我真的需要避免这种从不同目录加载页面的冲突,或者如果有人有想法修改此功能以同时接受不同目录。
p.s:记住第一个 php 文件假设检查来自 "Top-albums" 文件夹的页面,第二个来自 "pages" 文件夹。提前致谢
html:
<header>
<nav>
<ul>
<li><a href="#page1" class="active" id="page1-link">Page 1</a></li>
<li><a href="#page2" id="page2-link">Page 2</a></li>
<li><a href="#Top_albums3" id="page3-link">Page3</a></li>
<li><a href="#page4" id="page4-link">Page 4</a></li>
</ul>
</nav>
JS
$(function() {
$('header nav a').on('click', function() {
var linkClicked = $(this).attr('href');
if(linkClicked.indexOf('page') == true)
{
var $pageRoot = linkClicked.replace('#page', '');
$.ajax({
type: "POST",
url: "load2.php",
data: 'page='+$pageRoot,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#main-content').html(msg);
$('#main-content section').hide().fadeIn();
}
}
});
}
else
{
var $Top_albumsRoot = linkClicked.replace('#Top_albums', '');
$.ajax({
type: "POST",
url: "load.php",
data: 'Top_albums='+$Top_albumsRoot,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#main-content').html(msg);
$('#main-content section').hide().fadeIn();
}
}
});
}
});
});
我有这个功能,我曾经通过 jquery ajax 获取一些页面,它还负责活动 link 导航状态。下面是具有两个相同函数的代码,它们应该从两个不同的目录中获取页面,正如您看到的两个函数都使用相同的变量名 "linkClicked" 问题是只有第一个函数在工作,如果我删除了第一个函数,那么第二个函数功能开始工作。我想说的是这两个功能不能同时工作。我知道我不应该两次使用相同的变量名,但将变量名更改为其他名称也不起作用!
$(function() {
$('header nav a').click(function() {
var $linkClicked = $(this).attr('href');
document.location.hash = $linkClicked;
var $Top_albumsRoot = $linkClicked.replace('#Top_albums', '');
if (!$(this).hasClass("active")) {
$("header nav a").removeClass("active");
$(this).addClass("active");
$.ajax({
type: "POST",
url: "load.php",
data: 'Top_albums='+$Top_albumsRoot,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#main-content').html(msg);
$('#main-content section').hide().fadeIn();
}
}
});
}
else {
event.preventDefault();
}
});
var hash = window.location.hash;
hash = hash.replace(/^#/, '');
switch (hash) {
case 'page2' :
$("#" + hash + "-link").trigger("click");
break;
case 'Top_albums_Pop' :
$("#" + hash + "-link").trigger("click");
break;
case 'page4' :
$("#" + hash + "-link").trigger("click");
break;
}
});
$(function() {
$('header nav a').click(function() {
var $linkClicked = $(this).attr('href');
document.location.hash = $linkClicked;
var $pageRoot = $linkClicked.replace('#page', '');
if (!$(this).hasClass("active")) {
$("header nav a").removeClass("active");
$(this).addClass("active");
$.ajax({
type: "POST",
url: "load2.php",
data: 'page='+$pageRoot,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#main-content').html(msg);
$('#main-content section').hide().fadeIn();
}
}
});
}
else {
event.preventDefault();
}
});
var hash = window.location.hash;
hash = hash.replace(/^#/, '');
switch (hash) {
case 'page2' :
$("#" + hash + "-link").trigger("click");
break;
case 'page3' :
$("#" + hash + "-link").trigger("click");
break;
case 'page4' :
$("#" + hash + "-link").trigger("click");
break;
}
});
这是两个 php 文件,分别 link 编辑到这些函数 load.php 和 load2.php
<!--load.php-->
<?php
if(!$_POST['Top_albums']) die("0");
$page = (int)$_POST['Top_albums'];
if(file_exists('Top-albums/Top_albums'.$page.'.html'))
echo file_get_contents('Top-albums/Top_albums'.$page.'.html');
else echo 'There is no such page!';
?>
<!--load2.php-->
<?php
if(!$_POST['page']) die("0");
$page = (int)$_POST['page'];
if(file_exists('pages/page'.$page.'.html'))
echo file_get_contents('pages/page'.$page.'.html');
else echo 'There is no such page!';
?>
最后这是导航菜单
<li><a href="#page1" class="active" id="page1-link">Page 1</a></li>
<li><a href="#page2" id="page2-link">Page 2</a></li>
<li><a href="#Top_albums3" id="page3-link">Page3</a></li>
<li><a href="#page4" id="page4-link">Page 4</a></li>
所以我真的需要避免这种从不同目录加载页面的冲突,或者如果有人有想法修改此功能以同时接受不同目录。 p.s:记住第一个 php 文件假设检查来自 "Top-albums" 文件夹的页面,第二个来自 "pages" 文件夹。提前致谢
html:
<header>
<nav>
<ul>
<li><a href="#page1" class="active" id="page1-link">Page 1</a></li>
<li><a href="#page2" id="page2-link">Page 2</a></li>
<li><a href="#Top_albums3" id="page3-link">Page3</a></li>
<li><a href="#page4" id="page4-link">Page 4</a></li>
</ul>
</nav>
JS
$(function() {
$('header nav a').on('click', function() {
var linkClicked = $(this).attr('href');
if(linkClicked.indexOf('page') == true)
{
var $pageRoot = linkClicked.replace('#page', '');
$.ajax({
type: "POST",
url: "load2.php",
data: 'page='+$pageRoot,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#main-content').html(msg);
$('#main-content section').hide().fadeIn();
}
}
});
}
else
{
var $Top_albumsRoot = linkClicked.replace('#Top_albums', '');
$.ajax({
type: "POST",
url: "load.php",
data: 'Top_albums='+$Top_albumsRoot,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#main-content').html(msg);
$('#main-content section').hide().fadeIn();
}
}
});
}
});
});