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和内容必须中的标题与此脚本的工作方式完全相同。
无论如何，这应该是这种文件的情况。

<小时/> 我给你一个奖金“回到TOC”功能。

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标记的所有实例。使用逗号为find函数提供所有标记。喜欢这个

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

你已经完成了。

如何简化以下多个onclick功能

2 个答案: