奇函數行爲，與一個參數一起工作，部分與另一個參數一起工作

Question

我有一個頁面，其中有幾個可點擊的圖標淡入不同的內容，並且有一個函數需要一個事件（來自點擊處理程序）或變量，以在其他地方點擊相關鏈接時顯示正確的內容）。點擊時一切都按預期工作，但是當我嘗試使用變量參數時，函數會進入正確的if語句，但是dom操作不會僅發生在測試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'); 
} 
} 

Answer 1

當您嘗試撥打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); 
    } 
}); 

此外，您還可以完全下降的說法，如果你只是用call正確的內容傳遞到功能（只要你不使用event在所有PARAM）：

function servicePage() { 
    switch (+this.id) 
    case 1: // ... 
} 

$(document).ready(function(){ 
    $(".service_button").click(servicePage); 
    if (page) { 
    servicePage.call({id: page}); 
    } 
}); 

---

至於函數本身，它可以（也應該）被簡化。請注意，對於每個參數值，您可以執行兩項操作：激活page元素，並禁用「其他」元素。一個可能的方法來做到這一點：

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); 
    } 
}