Jquery語法問題

Question

我想要做的是：

#p12-1應該淡入淡出（它是一個點擊按鈕）。

單擊時，應查看變量$section的值，然後選擇要運行的部分。運行該部分時，還應增加變量$section。這應該意味着每個部分都會顯示下一個divs，並在每次單擊#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

我不明白你的一些代碼，但這裏有一個你可能會喜歡的想法。您可以使用簡單的控制反轉來代替控制代碼中的元素，因爲元素可以有多個類，當顯示和隱藏元素時，可以使用元素狀態。這使得更簡單（我相信更清晰）的代碼。

因此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); 
}); 

這對我來說似乎揭示潛在的bug看HTML（如p12-11永遠不會隱藏）。

Answer 2

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事件