Javascript 奇数函数行为，适用于一个参数，部分适用于另一个参数

我有一个页面，其中有几个可单击的图标，这些图标在不同的内容中淡入淡出，还有一个函数，它接受一个事件（来自单击处理程序）或变量（来自get请求，以便在从其他地方单击相关链接时显示正确的内容）。当单击时，一切都按预期工作，但是当我尝试使用变量param时，函数会进入right if语句，但是dom操作不会仅在test console.logs中发生。想知道是否有人知道为什么？我以前用eval来做这个，所以我宁愿让它工作也不愿回去！谢谢

page = <?php echo (int) $_GET["pg"] ?>;
if(page){
    servicePage(event,page);
}

$(document).ready(function(){
$(".service_button").click(servicePage);
})

function servicePage(event, pg =0){

console.log(this.id);
console.log(pg);    
if(this.id == 1 || pg == 1){
    console.log('here');
  $( "div.service_page2" ).hide();
  $( "div.service_page3" ).hide();
  $( "div.service_page4" ).hide();
  $("div.service_page1").fadeIn();
  $( ".service_button1" ).animate({
  width:"100%"},300);
  $( ".service_button2" ).animate({
  width:"50%"},300);
   $( ".service_button3" ).animate({
   width:"50%"},300);
   $( ".service_button4" ).animate({
   width:"50%"},300);

}

if(this.id == 2 || pg == 2){
    console.log('whut');
        $( "div.service_page1" ).hide();
  $( "div.service_page3" ).hide();
  $( "div.service_page4" ).hide();
  $("div.service_page2").fadeIn();
   $( ".service_button1" ).animate({
 width:"50%"},300);
   $( ".service_button2" ).animate({
 width:"100%"},300);
   $( ".service_button3" ).animate({
 width:"50%"},300);
   $( ".service_button4" ).animate({
 width:"50%"},300);
}

if(this.id == 3 || pg == 3){
     $( "div.service_page1" ).hide();
      $( "div.service_page2" ).hide();
      $( "div.service_page4" ).hide();
      $("div.service_page3").fadeIn();
        $( ".service_button1" ).animate({
     width:"50%"},300);
       $( ".service_button2" ).animate({
     width:"50%"},300);
       $( ".service_button3" ).animate({
     width:"100%"},300);
       $( ".service_button4" ).animate({
     width:"50%"},300);
}

if(this.id == 4 ||pg == 4){
     $( "div.service_page1" ).hide();
      $( "div.service_page2" ).hide();
      $( "div.service_page3" ).hide();
      $("div.service_page4").fadeIn();
        $( ".service_button1" ).animate({
     width:"50%"},300);
       $( ".service_button2" ).animate({
     width:"50%"},300);
       $( ".service_button3" ).animate({
     width:"50%"},300);
       $( ".service_button4" ).animate({
     width:"100%"},300);
    console.log('why');
 }
}

page=；
若有（第页）{
服务页面（事件，页面）；
}
$（文档）.ready（函数（）{
$（“.service_按钮”）。单击（servicePage）；
})
函数服务页（事件，pg=0）{
console.log（this.id）；
控制台日志（pg）；
if（this.id==1 | | pg==1）{
console.log（'here'）；
$（“div.service_page2”）.hide（）；
$（“div.service_page3”）.hide（）；
$（“div.service_page4”）.hide（）；
$（“div.service_page1”）.fadeIn（）；
$（“.service_按钮1”）。动画({
宽度：“100%”，300）；
$（“.service_按钮2”）。动画({
宽度：“50%”，300）；
$（“.service_按钮3”）。动画({
宽度：“50%”，300）；
$（“.service_按钮4”）。动画({
宽度：“50%”，300）；
}
if（this.id==2 | | pg==2）{
控制台日志（'whut'）；
$（“div.service_page1”）.hide（）；
$（“div.service_page3”）.hide（）；
$（“div.service_page4”）.hide（）；
$（“div.service_page2”）.fadeIn（）；
$（“.service_按钮1”）。动画({
宽度：“50%”，300）；
$（“.service_按钮2”）。动画({
宽度：“100%”，300）；
$（“.service_按钮3”）。动画({
宽度：“50%”，300）；
$（“.service_按钮4”）。动画({
宽度：“50%”，300）；
}
if（this.id==3 | | pg==3）{
$（“div.service_page1”）.hide（）；
$（“div.service_page2”）.hide（）；
$（“div.service_page4”）.hide（）；
$（“第3页服务分部”）.fadeIn（）；
$（“.service_按钮1”）。动画({
宽度：“50%”，300）；
$（“.service_按钮2”）。动画({
宽度：“50%”，300）；
$（“.service_按钮3”）。动画({
宽度：“100%”，300）；
$（“.service_按钮4”）。动画({
宽度：“50%”，300）；
}
if（this.id==4 | | pg==4）{
$（“div.service_page1”）.hide（）；
$（“div.service_page2”）.hide（）；
$（“div.service_page3”）.hide（）；
$（“第4页服务分部”）.fadeIn（）；
$（“.service_按钮1”）。动画({
宽度：“50%”，300）；
$（“.service_按钮2”）。动画({
宽度：“50%”，300）；
$（“.service_按钮3”）。动画({
宽度：“50%”，300）；
$（“.service_按钮4”）。动画({
宽度：“100%”，300）；
console.log（“为什么”）；
}
}

当您试图调用

servicePage（event，page）

时，DOM中没有这些元素。通过将此调用移动到

$（document）.ready（）

回调中，您可以轻松删除此调用：

var page = <?php echo (int) $_GET["pg"] ?>;
$(document).ready(function(){
  $(".service_button").click(servicePage);
  if(page){
    servicePage(null, page);
  }
});

---

至于函数本身，它可以（也应该）简化。请注意，对于param的每个值，您要做两件事：激活

页面

元素，并停用“other”元素。一种可能的方法是：

function activatePage(pageNo) {
  $('div.service_page' + pageNo).fadeIn();
  $('.service_button' + pageNo).animate({ width: '100%' }, 300);
}

function deactivatePagesOtherThan(activePageNo) {
  var inactivePages = [1,2,3,4].filter(function(no) {
    return no !== activePageNo;
  });
  var inactivePageSelectors = inactivePages.map(function(no) {
    return 'div.service_page' + no;
  });
  var inactiveButtonSelectors = inactivePages.map(function(no) {
    return '.service_button' + no;
  });
  $(inactivePageSelectors.join(',')).hide();
  $(inactiveButtonSelectors.join(',')).animate({ width: '50%' }, 300);
}

function servicePage() {
  var no = +this.id;
  if (no >= 1 && no <= 4) {
    deactivatePagesOtherThan(no);
    activatePage(no);
  }
}

功能激活页（页码）{
$（'div.service_page'+pageNo.fadeIn（）；
$（'.service_按钮'+pageNo.）。动画（{width:'100%}，300）；
}
功能停用除（activePageNo）{
var inactivePages=[1,2,3,4]。筛选器（函数（否）{
返回编号！==activePageNo；
});
var inactivePageSelectors=inactivePages.map（函数（否））{
返回“部门服务页面”+否；
});
var inactiveButtonSelectors=inactivePages.map（函数（否））{
返回“.服务按钮”+否；
});
$（inactivePageSelectors.join（'，）.hide（）；
$（inactiveButtonSelectors.join（'，）.animate（{width:'50%'），300）；
}
函数servicePage（）{
var no=+this.id；
如果（no>=1&&no当您尝试调用
servicePage（event，page）
时，DOM中没有这些元素。您可以通过在
$（document）中移动此调用来轻松删除这些元素。ready（）
回调：

var page = <?php echo (int) $_GET["pg"] ?>;
$(document).ready(function(){
  $(".service_button").click(servicePage);
  if(page){
    servicePage(null, page);
  }
});


至于函数本身，它可以（也应该）简化。请注意，对于param的每个值，您要做两件事：激活
页面
元素和停用“其他”元素。一种可能的方法是：

function activatePage(pageNo) {
  $('div.service_page' + pageNo).fadeIn();
  $('.service_button' + pageNo).animate({ width: '100%' }, 300);
}

function deactivatePagesOtherThan(activePageNo) {
  var inactivePages = [1,2,3,4].filter(function(no) {
    return no !== activePageNo;
  });
  var inactivePageSelectors = inactivePages.map(function(no) {
    return 'div.service_page' + no;
  });
  var inactiveButtonSelectors = inactivePages.map(function(no) {
    return '.service_button' + no;
  });
  $(inactivePageSelectors.join(',')).hide();
  $(inactiveButtonSelectors.join(',')).animate({ width: '50%' }, 300);
}

function servicePage() {
  var no = +this.id;
  if (no >= 1 && no <= 4) {
    deactivatePagesOtherThan(no);
    activatePage(no);
  }
}

功能激活页（页码）{
$（'div.service_page'+pageNo.fadeIn（）；
$（'.service_按钮'+pageNo.）。动画（{width:'100%}，300）；
}
功能停用除（activePageNo）{
var inactivePages=[1,2,3,4]。筛选器（函数（否）{
返回编号！==activePageNo；
});
var inactivePageSelectors=inactivePages.map（函数（否））{
返回“部门服务页面”+否；
});
var inactiveButtonSelectors=inactivePages.map（函数（否））{
返回“.服务按钮”+否；
});
$（inactivePageSelectors.join（'，）.hide（）；
$（inactiveButtonSelectors.join（'，）.animate（{width:'50%'），300）；
}
函数servicePage（）{
var no=+this.id；
如果（否>=1&&否