如何簡化以下多個onclick函數

Question

我有以下代碼，並且需要任何方法幫助簡化onclick函數而不是重複多次。

function onLoadHandler() { 
    var st1 = $("#i11031821").contents().find("p:contains('Application and Acceptance of')"); 
    var st2 = $("#i11031821").contents().find("p:contains('Provision of Services')"); 
    var st3 = $("#i11031821").contents().find("p:contains('Users Generally')"); 
    var st4 = $("#i11031821").contents().find("p:contains('Member Accounts')"); 
    var st5 = $("#i11031821").contents().find("p:contains('Member’s Responsibilities')"); 
    var st6 = $("#i11031821").contents().find("p:contains('Breaches by Members')"); 
    var st7 = $("#i11031821").contents().find("p:contains('Transactions Between Buyers and')"); 
    var st8 = $("#i11031821").contents().find("p:contains('Limitation of Liability')"); 
    var st9 = $("#i11031821").contents().find("p:contains('Force Majeure')"); 
    var st10 = $("#i11031821").contents().find("p:contains('Intellectual Property Rights')"); 
    var st11 = $("#i11031821").contents().find("p:contains('Notices')"); 
    var st12 = $("#i11031821").contents().find("p:contains('General Provisions')"); 
    var st21 = $("#i11022249").contents().find("p:contains('1. Application')"); 
    var st22 = $("#i11022249").contents().find("p:contains('2. Provision')"); 
    var st23 = $("#i11022249").contents().find("p:contains('3. Users')"); 
    var st24 = $("#i11022249").contents().find("p:contains('4. Member')"); 
    var st25 = $("#i11022249").contents().find("p:contains('5. Member’s')"); 
    var st26 = $("#i11022249").contents().find("p:contains('6. Breaches')"); 
    var st27 = $("#i11022249").contents().find("p:contains('7. Transactions')"); 
    var st28 = $("#i11022249").contents().find("p:contains('8. Limitation')"); 
    var st29 = $("#i11022249").contents().find("p:contains('9. Force')"); 
    var st30 = $("#i11022249").contents().find("p:contains('10. Intellectual')"); 
    var st31 = $("#i11022249").contents().find("p:contains('11. Notices')"); 
    var st32 = $("#i11022249").contents().find("p:contains('12. General')"); 
    $(st1).on('click', function(event) { 
     $('html, body').animate({ 
      scrollTop: $(st21).offset().top 
     }, 2000); 
    }); 
    $(st2).on('click', function(event) { 
     $('html, body').animate({ 
      scrollTop: $(st22).offset().top 
     }, 2000); 
    }); 
    $(st3).on('click', function(event) { 
     $('html, body').animate({ 
      scrollTop: $(st23).offset().top 
     }, 2000); 
    }); 
    $(st4).on('click', function(event) { 
     $('html, body').animate({ 
      scrollTop: $(st24).offset().top 
     }, 2000); 
    }); 
    $(st5).on('click', function(event) { 
     $('html, body').animate({ 
      scrollTop: $(st25).offset().top 
     }, 2000); 
    }); 
    $(st6).on('click', function(event) { 
     $('html, body').animate({ 
      scrollTop: $(st26).offset().top 
     }, 2000); 
    }); 
    $(st7).on('click', function(event) { 
     $('html, body').animate({ 
      scrollTop: $(st27).offset().top 
     }, 2000); 
    }); 
    $(st8).on('click', function(event) { 
     $('html, body').animate({ 
      scrollTop: $(st28).offset().top 
     }, 2000); 
    }); 
    $(st9).on('click', function(event) { 
     $('html, body').animate({ 
      scrollTop: $(st29).offset().top 
     }, 2000); 
    }); 
    $(st10).on('click', function(event) { 
     $('html, body').animate({ 
      scrollTop: $(st30).offset().top 
     }, 2000); 
    }); 
    $(st11).on('click', function(event) { 
     $('html, body').animate({ 
      scrollTop: $(st31).offset().top 
     }, 2000); 
    }); 
    $(st12).on('click', function(event) { 
     $('html, body').animate({ 
      scrollTop: $(st32).offset().top 
     }, 2000); 
    }); 
    $([st1[0], st2[0], st3[0], st4[0], st5[0], st6[0], st7[0], st8[0], st9[0], st10[0], st11[0], st12[0]]).css({ 
     "width": "300px", 
     "padding": "10px", 
     "border": "solid 1px silver", 
     "margin-bottom": "2px", 
     "box-shadow": " 0px 0px 5px silver", 
     "cursor": "pointer" 
    }); 
} 

Answer 1

像你的問題下面的評論說：«這是在HTML錨標記工作»。
但你不會有動畫效果，這顯然是你想要的。

這是我看不到HTML的最佳答案。

我使用了類「Toc」在這裏，爲表內容標題...
我用「Content」，內容標題...
但是隻要你喜歡，你可以爲它們命名; ）

這些類將定義CSS 和將用作jQuery中的選擇器。

定義您的CSS，最好在文檔的<head>部分。
這裏是我的建議：

<style> 
.Toc{ 
    /* Define the CSS specific to the TOC heading here */ 
    /* Here is my inpiration for the example */ 
    font-weight:bold; 
    text-shadow:2px 3px #ccc; 
    cursor: pointer; 
} 
.Content{ 
    width: 300px; 
    padding: 10px; 
    border: solid 1px silver; 
    margin-bottom: 2px; 
    box-shadow: 0px 0px 5px silver; 
    cursor: pointer; 
} 
</style> 

jQuery的腳本：

$(".Toc, .Content").on('click', function() { 

    // Get the title clicked... Either in TOC or Content. 
    var thisTitle = $(this).html(); 
    var thisContent; 

    // Find the relative content. 
    $(".Content").each(function(){ 
     if($(this).html() == thisTitle){ 
      thisContent = $(this); 
     } 
    }); 

    // Animate to content. 
    $('html, body').animate({ 
     scrollTop: thisContent.offset().top 
    }, 2000); 
}); 

注意第一$(this)選擇代表點擊的元素。
雖然第二個代表檢查元素，而每個循環迭代。

還要注意，在TOC和內容MUST標題完全相同這個腳本工作。
無論如何，這應該是這種文件的情況。

---

我給你做一個 獎金 「返回目錄」 功能。

CSS：

.backtoTOC{ 
    /* Here is my inpiration for the "back to TOC link" */ 
    color:#c44; 
    width:calc(100% - 1em); 
    text-align:right; 
    margin-right:1em; 
    cursor: pointer; 
} 

腳本：

$(".backtoTOC").click(function(){ 
    $('html, body').animate({ 
     scrollTop: 0 
    }, 2000); 
}); 

見CodePen運行這些代碼。

Answer 2

您可以使用單個查詢搜索每個p選項卡，它將返回匹配p標籤的所有實例。使用逗號在查找功能中提供所有標籤。 像這樣

var clickable_elements = $("#i11031821, #i11022249").contents().find("p:contains('Application and Acceptance of'), p:contains('anything else')"); 

它將返回所有匹配的元素。現在，您可以輕鬆結束單擊事件。

$(clickable_elements).on('click', function(event) { 
     var self = $(this); 
     $('html, body').animate({ 
      scrollTop: self.offset().top 
     }, 2000); 
    }); 

你已經完成了。