Javascript Jquery语法问题

我想做的是：

p12-1应该淡入淡出，单击此处按钮

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

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块中的每个选项

---

尝试添加角色。。。jquery找不到元素p12-1，因为它不存在并且不会触发单击事件

我不理解您的一些代码，但这里有一个您可能喜欢的想法。您可以使用简单的控制反转，而不是控制元素在代码中的行为——因为元素可以有多个类，所以在显示和隐藏元素时，您可以拥有元素状态。这使得代码更简单，我相信代码更清晰

因此，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>  

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

---

在我看来，在查看html时，这似乎揭示了潜在的错误，例如p12-11从未隐藏。

请显示您的标记，我想这可以很容易地完成。我猜您添加了额外的5个字符作为强调，而不是建议这是jQuery选择器的正确语法。感谢Hogan，这真的很有帮助

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