Question

我有这个功能，我曾经通过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”文件夹。提前谢谢

Answer 1

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/

我如何避免jquery ajax中的变量冲突

1 个答案: