1つのパラメータで動作し、1つのパラメータで動作し、別の部分で動作する

Question

クリック可能なアイコンがいくつかあり、それぞれ異なるコンテンツをフェードインする機能と、イベント（クリックハンドラから）または変数他の場所から関連リンクがクリックされたときに適切なコンテンツを表示する）。クリックするとすべてが正常に機能しますが、変数paramを使用しようとすると、関数は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'); 
} 
} 

Answer 1

servicePage(event,page)に電話をかけようとしているときにDOMにこれらの要素がありません。あなたがeventを使用しないようあなただけの（関数に正しい内容を渡すためにcallを使用する場合は、完全に引数をドロップすることができ、また

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

：あなたは簡単に$(document).ready()コールバックでこの呼び出しを移動することで、これをドロップすることができます全てでPARAM）：関数自体として

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

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

---

、それは（と）に簡略化されるべきであることができます。 paramの値ごとに、page要素を有効にし、 'その他の要素'を無効にするという2つのことを行います。これを行うための1つのアプローチ：

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