Question

新手在这里！

我是jQuery的新手，几天前就开始学习了。一旦你看了我的jQuery代码，就可以告诉你。

我正在尝试使用jQuery编写内容滑块，但我不确定我做错了什么。以下是我在修复代码时想要实现的目标。

我想应用淡化效果fadeIn()
我想切换内容本身加上onclick。
如何改进此代码？

我需要有人指出我犯的错误。如果有人也可以指导我如何实现上述目标，那将非常感激。

您可以在此处找到我的代码jsfiddle

$(document).ready(function () {
    /* Initial State show 1st content */
        $("#button > div:nth-child(1)").css("background-color", "#116f11");
    $(".para-2").hide();
    $(".para-3").hide();
    $(".para-1").show();

    function slider(n) {
        /* if click #1 */
      if (n == '1'){
        $(".para-2").hide();
        $(".para-3").hide();
        $(".para-1").show();
        $("#button > div:nth-child(1)").css("background-color", "#116f11");
      } else if (n == '2'){ /* if click #2 */
        $(".para-2").hide();
        $(".para-1").hide();
        $(".para-2").show();
        $("#button > div:nth-child(2)").css("background-color", "#116f11");
      } else if (n == '3'){ /* if click #3 */
        $("#button > div:nth-child(3)").css("background-color", "#116f11");
        $(".para-2").hide();
        $(".para-1").hide();
        $(".para-3").show();
      }
    }
});

Answer 1

我已更新您的代码。 this你的目标是什么？

我专门更新了您的slider功能：

function slider(n)
{
    switch (n)
    {
        case 1:
            $("#slideshow").children().fadeOut(400);
            setTimeout(function()
            {
                $(".para-1").fadeIn();
            },405);
            $(".selected").removeClass("selected").addClass("unselected");
            $("#button > div:nth-child(1)").addClass("selected").removeClass("unselected");
            break;
        case 2:
            $("#slideshow").children().fadeOut(400);
            setTimeout(function()
            {
                $(".para-2").fadeIn();
            },405);
            $(".selected").removeClass("selected").addClass("unselected");
            $("#button > div:nth-child(2)").addClass("selected").removeClass("unselected");
            break;
        case 3:
            $("#slideshow").children().fadeOut(400);
            setTimeout(function()
            {
                $(".para-3").fadeIn();
            },405);
            $(".selected").removeClass("selected").addClass("unselected");
            $("#button > div:nth-child(3)").addClass("selected").removeClass("unselected");
            break;
    }
}

我希望这会有所帮助。

干杯， Fjpackard。

内容滑块jQuery

1 个答案: