Question

我想做的是：

#p12-1应淡入淡出（点击此处按钮）。

单击时，应查看变量$section的值，然后选择要运行的部分。运行该部分时，它还应该增加变量$section。这应该意味着每个部分都会显示下一个div，并在每次点击#p12-1时隐藏部分/全部旧部分。

if (index == 11) {
    $section == (parseInt(1));
    $("#prev").show();
    $("#next").show();
    $("#p12-1").delay(1000).fadeIn("slow", function() {
            (function loop() {
                $("#p12-1").delay(200).fadeTo("slow", 0.5, function ()  {
                    $("#p12-1").delay(200).fadeTo("slow", 1, loop);
                });
            }());
    });
$("p12-1").click(function ()    {
    if ($section == 1)  {
        var $section = (parseInt(currentValue) + 1);        
            $("#p12-2").fadeOut(1000);
            $("#p12-3").fadeOut(1000);          
            $("#p12-4").fadeIn(1000);
            $("#p12-5").fadeIn(1000);
    };
    if ($section == 2)  {
        var $section = (parseInt(currentValue) + 1);
            $("#p12-4").fadeOut(1000);
            $("#p12-5").fadeOut(1000);
            $("#p12-6").fadeIn(1000);
            $("#p12-7").fadeIn(1000);
            $("#p12-8").fadeIn(1000);
    };
    if ($section == 3)  {
        var $section = (parseInt(currentValue) + 1);
            $("#p12-6").fadeOut(1000);
            $("#p12-9").fadeIn(1000);
            $("#p12-10").fadeIn(1000);
    };
    if ($section == 4)  {
        var $section = (parseInt(currentValue) + 1);
            $("#p12-6").fadeOut(1000);
            $("#p12-9").fadeOut(1000);
            $("#p12-10").fadeOut(1000);
            $("#p12-11").fadeIn(1000);
            $("#p12-12").fadeIn(1000);          
    };
});
}

HTML：

<div class="main-slide main-slide-12" style="display:none;">
    <div id="p12-1" style="display:none;"><img src="images/p12-1.png" /></div>
    <div style="display:block;" id="p12-2"><img src="images/p12-2.png" /></div>
    <div style="display:block;" id="p12-3"><img src="images/p12-3.png" /></div>
    <div style="display:none;" id="p12-4"><img src="images/p12-4.png" /></div>
    <div style="display:none;" id="p12-5"><img src="images/p12-5.png" /></div>
    <div style="display:none;" id="p12-6"><img src="images/p12-6.png" /></div>
    <div style="display:none;" id="p12-7"><img src="images/p12-7.png" /></div>
    <div style="display:none;" id="p12-8"><img src="images/p12-8.png" /></div>
    <div style="display:none;" id="p12-9"><img src="images/p12-9.png" /></div>
    <div style="display:none;" id="p12-10"><img src="images/p12-10.png" /></div>
    <div style="display:none;" id="p12-11"><img src="images/p12-11.png" /></div>
    <div style="display:none;" id="p12-12"><img src="images/p12-12.png" /></div>
</div>

不幸的是，需要所有这些项目，并且需要在不同时间显示和隐藏一些项目。我相信问题在于语法，因为我将能够编辑每个if ($section == X)块中的选项。

Answer 1

if (index == 11) {
$section == (parseInt(1));
$("#prev").show();
$("#next").show();
$("#p12-1").delay(1000).fadeIn("slow", function() {
    (function loop() {
        $("#p12-1").delay(200).fadeTo("slow", 0.5, function ()  {
            $("#p12-1").delay(200).fadeTo("slow", 1, loop);
        });
    }());
});
$("######p12-1").click(function ()    {

尝试添加'＃'字符... jquery无法找到元素p12-1，因为它不存在且不会触发click事件

Answer 2

我不了解你的一些代码，但这是你可能想要的一个想法。您可以使用简单的控制反转，而不是控制元素在代码中的作用 - 因为元素可以有多个类，因此在显示和隐藏元素时可以使用元素状态。这使得代码更简单（并且我相信更清晰）。

因此HTML可能如下所示：

<div class="main-slide main-slide-12" style="display:none;">
    <div id="p12-1" style="display:none;"><img src="images/p12-1.png" /></div>
    <div class="hide-1"                      ><img src="images/p12-2.png" /></div>
    <div class="hide-1"                      ><img src="images/p12-3.png" /></div>
    <div class="show-1 hide-2"               ><img src="images/p12-4.png" /></div>
    <div class="show-1 hide-2"               ><img src="images/p12-5.png" /></div>
    <div class="       show-2 hide-3 hide-4" ><img src="images/p12-6.png" /></div>
    <div class="       show-2"               ><img src="images/p12-7.png" /></div>
    <div class="       show-2"               ><img src="images/p12-8.png" /></div>
    <div class="              show-3 hide-4" ><img src="images/p12-9.png" /></div>
    <div class="              show-3 hide-4" ><img src="images/p12-10.png" /></div>
    <div class="                     show-4" ><img src="images/p12-11.png" /></div>
    <div class="                     show-4" ><img src="images/p12-12.png" /></div>
</div>

然后你的javascript看起来像这样：

$("#p12-1").click(function ()    {
    $(".hide-"+$section).fadeOut(1000);
    $(".show-"+$section).fadeIn(1000);
});

在我看来，在查看html时会发现潜在的错误（例如，p12-11永远不会被隐藏）。

Jquery语法问题

2 个答案: