在函数之后调用函数答案

【问题标题】：Calling a function after a function在函数之后调用函数
【发布时间】：2014-01-12 13:34:15
【问题描述】：

我正在创建一个网站并使用 jQuery 函数。我似乎无法解决以下问题。

我有三个按钮，单击一个会出现十个新按钮。根据点击前三个按钮中的哪一个，接下来的 10 个按钮应该会显示特定的文本。问题是当我尝试调用文本时，即使我刚刚调用了p#icpast，所有文本也会出现。

三个初始按钮

function past() {
    $(this).addClass("emphasis");
    $("p#present").removeClass("emphasis");
    $("p#future").removeClass("emphasis");
    $("div#text2").slideDown(200);
    $(".competency").hide();

    $(".1").fadeTo(1000, 1);
    $(".2").fadeTo(1000, 0);
    $(".3").fadeTo(1000, 0);
    k = 1;
    return false

    $("div#container1").click(ic(displaytext));    
}    
function present() {
    $(this).addClass("emphasis");
    $("p#past").removeClass("emphasis");
    $("p#future").removeClass("emphasis");
    $("div#text2").slideDown(200);
    $(".competency").hide();

    $(".1").fadeTo(1000, 1);
    $(".2").fadeTo(1000, 0.7);
    $(".3").fadeTo(1000, 0);
    k = 2;
    return false
}    
function future() {
    $(this).addClass("emphasis");
    $("p#past").removeClass("emphasis");
    $("p#present").removeClass("emphasis");
    $("div#text2").slideDown(300);
    $(".competency").hide();

    $(".1").fadeTo(1000, 1);
    $(".2").fadeTo(1000, 0.7);
    $(".3").fadeTo(1000, 0.6);
    k = 3;
    return false
}

$("p#past").click(past)
$("p#present").click(present);
$("p#future").click(future);

10 个按钮之一

function ic() {
    $("div#text2").slideUp(200)
    $("p").removeClass("emphasis");
    $("#icpast").slideDown(300).siblings().hide()
    return false
}

p#icpast是我要显示的文字

我想让一些文字出现：

<div>
    <p class="competency" id="icpast">Icpast</p>
    <p class="competency" id="icpresent">Icpresent</p>
    <p class="competency" id="icfuture">Icfuture</p>
</div>

【问题讨论】：

你也可以发布你的html吗？
我已经添加了需要调用的html
该html是否在页面中重复了更多次？
不，应该出现的只是三个示例文本。每次我尝试使用 p#icpast 使文本出现时，也会出现 #icpresent 和 #icfuture。
你能用这个做一个jsfiddle吗？我想帮忙，但不清楚你的 html/script/CSS 是怎样的。请填写并回帖：jsfiddle.net/wB3yy

标签： jquery text

【解决方案1】：

您的代码可以进行大量优化。这是一个建议：

$(document).ready(function () {
    var k = 0;

    $(".2").fadeTo(0, 0);
    $(".3").fadeTo(0, 0);
    $(".1").fadeTo(0, 0);
    $(".competency").hide(0);

    // alleen groot blijven als hij geklikt is > nog aanpassen

    /* MOVED TO CSS
        $(".growth").hover(function () { ...
    */

    function ic() {
        $("div#text2").slideUp(200)
        $("p").removeClass("emphasis");
        $("p.competency").eq(k - 1).slideDown(300).siblings().hide()
        return false
    }

    function times() {
        $("p.growth").removeClass("emphasis");
        $(this).addClass("emphasis");
        $("div#text2").slideDown(200);
        $(".competency").hide();
        k = $(this).index() + 1;

        $(".1").fadeTo(1000, 1);
        if (k == 2) $(".2").fadeTo(1000, 0.7);
        if (k == 3) $(".3").fadeTo(1000, 0.6);

        $("div#container1").click(ic);
        return false
    }

    $(".growth").on('click', times)

    $("[id^=ul]").hide();
    $("p[id^=ptext]").hide();
    $("p[id^=act]").hide();

    $("#p1, #p2, #p3").click(function () {
        var nr = this.id.split('p')[1];
        $("p[id^=ptext]").hide(400);
        $("#ptext" + nr).delay(400).slideToggle(300);
        $("[id^=ul]").hide(400);
        $("#ul" + nr).delay(400).slideToggle(300);

    });

    $("li[id^=act]").mouseover(function () {
        var nr = this.id.split('act')[1];
        $("p[id^=act]").hide(0);
        $("p#act" + nr).delay(100).slideToggle(300);
    });
});

添加了 CSS：

.growth:hover {
    color:#666;
    font-size: 30px;
    left: -40px;
}

Demo

【讨论】：