我如何避免变量冲突在jquery ajax


how do i avoid variables conflicts in jquery ajax

我有这个函数,我用来获取一些页面的jquery ajax,也负责导航的活动链接状态。下面是代码,有两个相同的函数,应该从两个不同的目录获取页面,正如你看到的两个函数使用相同的变量名称"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文件分别链接到这些函数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();
                    }
                }            
              });
     }
 });
});

演示:https://jsfiddle.net/5uotecym/1/