如何處理非常相似的按鈕而不使用每個函數？

我有一堆錨鏈接，我使用JavaScript淡入不同的div來模仿頁面。如何處理非常相似的按鈕而不使用每個函數？

<script type="text/javascript"> 

$(document).ready(function() { 

    showHomePage(); 

    $('.homebutton').click(function() { 
     displayNone(); 
     showWindow("homepage"); 
    }); 
    $('.aboutbutton').click(function() { 
     displayNone(); 
     showWindow("aboutpage"); 
    }); 
    $('.gallerybutton').click(function() { 
     displayNone(); 
     showWindow("gallerypage"); 
    }); 
    $('.musicbutton').click(function() { 
     displayNone(); 
     showWindow("musicpage"); 
    }); 

    function displayNone() { 
     $('.pagecontainer>div').fadeOut(0); 
    } 

    function showHomePage() { 
     $('.pagecontainer').fadeIn(); 
     $('#homepage').fadeIn(); 
    } 

    function showWindow(name) { 
     $('#' + name).fadeIn(); 
    } 

});

<body> 
.... 
.... 
<a href="#homepage" class="homebutton">Home</a> 
<a href="#aboutpage" class="aboutbutton">About</a> 
<a href="#gallerypage" class="gallerybutton">Gallery</a> 
<a href="#musicpage" class="musicbutton">Music</a> 
.... 
.... 
<div id="homepage">Home page</div> 
<div id="aboutpage">About page</div> 
<div id="gallerypage">Gallery page</div> 
<div id="musicpage">Music page</div> 
.... 
</body>

的所有網頁都設置爲隱藏在第一（阿爾法= 0），並且當鏈接被點擊任何頁面當前顯示設置爲隱藏的與displayNone（）和相應的頁淡入。這一切都沒有問題。

但我想縮短這段代碼。正如你可以看到，如果我說50頁，JavaScript部分會變得非常混亂，因爲我必須寫50次相同的行。我所有的鏈接都有類「_button」，這對應於「_page」，所以我認爲應該有一個快捷方式，這隻需要一個功能？喜歡的東西：

當單擊[類名稱]中，刪除類名
然後追加「頁」的名稱
比如年底的「按鈕」部分時，「aboutbutton」被點擊時，將名稱更改爲「約」，然後添加「頁」，成爲「aboutpage」
然後顯示該div

但我不知道該怎麼寫。謝謝你的幫助。

來源

2013-03-01 Windbrand

你需要尋找到jQuery的字符串操作，你是金色的。你的邏輯是合理的。 – isherwood 2013-03-01 22:08:53

您是否可以更改您的ID和班級，還是已經構建的頁面？ – isherwood 2013-03-01 22:10:34

你可以在HTML多個類，所以你可以按鈕是這樣的：

<a href="#homepage" class="button homebutton">Home</a> 
<a href="#aboutpage" class="button aboutbutton">About</a> 
<a href="#gallerypage" class="button gallerybutton">Gallery</a> 
<a href="#musicpage" class="button musicbutton">Music</a>

然後使用一個單一的事件處理程序，以針對他們的所有。這應該讓你開始：

$('.button').on('click', function(e){ 
    e.preventDefault(); 
    // Luckly, your urls match the id selectors 
    // do not use this.href, as it will return the full, resolved url 
    // (see Kolink's answer) 
    $(this.getAttribute("href")).fadeIn(); 
});

來源

2013-03-01 22:09:23 bfavaretto

謝謝，工作很棒！ – Windbrand 2013-03-02 00:32:37

試試這個：

$(function() { 
    $("a[href^='#']").click(function() { 
    $(".pagecontainer>div").fadeOut(0); 
    $(this.getAttribute("href")).fadeIn(); 
    }); 
    $(".pagecontainer").fadeIn(); 
    $("#homepage").fadeIn(); 
});

來源

2013-03-01 22:11:05

我很好奇你使用'getAttribute'，'this.href'會在任何瀏覽器中失敗嗎？ – bfavaretto 2013-03-01 22:12:54

'this.href'會產生類似於'http：// example.com/path/to/current/page.html＃homepage'的東西 - 換句話說，它會返回完全解析的絕對URL。但是，getAttribute將返回源中的文字屬性。 – 2013-03-01 22:13:50

謝謝，我忘了。將更新我的答案。 – bfavaretto 2013-03-01 22:14:44

如何處理非常相似的按鈕而不使用每個函數？

回答

相關問題