Question

我正在创建一个网站并使用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>

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

在函数之后调用函数

1 个答案:

Demo