如何讓我的代碼更少詳細

Question

我在Wordpress中使用jQuery，它正在做我期望它做的事情。問題是我不得不重寫我正在使用的函數4次（目前，可能會更晚）爲同一操作。我知道必須有一種方法不會使用$（this）來冗餘，但我一直無法弄清楚在哪裏使用它或如何使用它。

這是我使用的代碼：

<script> 
var x = jQuery.noConflict(); 
x(function(){ 
x(".jab .jabcierre1").hide(); 
x("h2.c1").click(function(){ 
    x(".jab .jabcierre1").slideToggle(200); 
}); 



x(".jab .jabcierre2").hide(); 
x("h2.c2").click(function(){ 
    x(".jab .jabcierre2").slideToggle(200); 
}); 

x(".jab .jabcierre3").hide(); 
x("h2.c3").click(function(){ 
    x(".jab .jabcierre3").slideToggle(200); 
}); 

x(".jab .jabcierre4").hide(); 
x("h2.c4").click(function(){ 
    x(".jab .jabcierre4").slideToggle(200); 
}); 


}); 
</script> 

但你可以說出全部的目的，這是隱藏一個div方含我想隱藏的HTML並顯示該div當H2標題點擊。 我不得不給每個h2一個1,2,3的類，這樣當標題（h2）被點擊時，它不會觸發頁面中的所有h2s，這就是爲什麼我不得不求助於重寫函數每次我添加一個新的div。

確定這裏是HTML：

<div class="jab clearf"> 
<h2 class="c1">LAVANDA</h2> 
<div class="jabcierre1"> 
<ul class="benef"> 
<h3>Beneficios</h3> 
<li>Piel Grasa</li> 
<li>Relajante</li> 
<li>Problemas de Estrias</li> 
</ul> 

<ul class="ingreds"> 
<h3>Ingredientes</h3> 
<li>Aceite de Palma</li> 
<li>Aceite de Coco</li> 
<li>Acite de Aguacate</li> 
<li>Acite de Pepita de uva</li> 
<li>Acite de Almendras</li> 
<li>Aceites esenciales</li> 
<li>Leche de cabra</li> 
</ul> 
<img src="http://www.granjaelmolino.com.mx/wp-content/uploads/2015/02/jabon-artesanal-23.jpg" alt="jabon-artesanal-27" width="350" class="alignright size-full wp-image-455" /> 
</div> 
</div> 
<!-- //////////////////////// termina lavanda  ///////////////////////// --> 

<div class="jab clearf"> 
<h2 class="c2">Romero</h2> 
<div class="jabcierre2"> 
<ul class="benef"> 
<h3>Beneficios</h3> 
<li>Piel Grasa</li> 
<li>Ayuda con problemas de Acne</li> 
</ul> 

<ul class="ingreds"> 
<h3>Ingredientes</h3> 
<li>Aceite de Palma</li> 
<li>Aceite de Coco</li> 
<li>Acite de Aguacate</li> 
<li>Acite de Pepita de uva</li> 
<li>Acite de Almendras</li> 
<li>Aceites esenciales</li> 
<li>Leche de cabra</li> 
</ul> 
<img src="http://www.granjaelmolino.com.mx/wp-content/uploads/2014/12/jabon-artesanal-27.jpg" alt="jabon-artesanal-27" width="350" class="alignright size-full wp-image-455" /> 
</div> 
</div> 

<!-- //////////////////////// termina Romero ///////////////////////// --> 

<div class="jab clearf"> 
<h2 class="c3">Citricos</h2> 
<div class="jabcierre3"> 
<ul class="benef"> 
<h3>Beneficios</h3> 
<li>Ayuda con problema de piel manchada</li> 
<li>Ayuda con problemas piel de paño</li> 

</ul> 

<ul class="ingreds"> 
<h3>Ingredientes</h3> 
<li>Aceite de Palma</li> 
<li>Aceite de Coco</li> 
<li>Acite de Aguacate</li> 
<li>Acite de Pepita de uva</li> 
<li>Acite de Almendras</li> 
<li>Leche de cabra</li> 
<li>Aceites esenciales</li> 
</ul> 
<img src="http://www.granjaelmolino.com.mx/wp-content/uploads/2015/02/jabon-artesanal-26.jpg" alt="jabon-artesanal-27" width="350" class="alignright size-full wp-image-455" /> 
</div> 
</div> 

<!-- //////////////////////// termina Citricos ///////////////////////// --> 

<div class="jab clearf"> 
<h2 class="c4">Almendras</h2> 
<div class="jabcierre4"> 
<ul class="benef"> 
<h3>Beneficios</h3> 
<li>Ayuda con problema de piel reseca</li> 
<li>Ayuda con problemas de diabetes</li> 

</ul> 

<ul class="ingreds"> 
<h3>Ingredientes</h3> 
<li>Aceite de Palma</li> 
<li>Aceite de Coco</li> 
<li>Acite de Aguacate</li> 
<li>Acite de Pepita de uva</li> 
<li>Acite de Almendras</li> 
<li>Leche de cabra</li> 
<li>Aceites esenciales</li> 
</ul> 
<img src="http://www.granjaelmolino.com.mx/wp-content/uploads/2015/02/jabon-artesanal-24.jpg" alt="jabon-artesanal-27" width="350" class="alignright size-full wp-image-455" /> 
</div> 
</div> 

Answer 1

像這樣的事情

jQuery(function($){ 
    var jab = $('.jab [class^="jabcierre"]').hide(); 

    $('h2[class^="c"]').on('click', function(){ 
     jab.filter('.jabcierre' + this.className.slice(-1)).slideToggle(200); 
    }); 
}); 

Answer 2

您可以創建在其中傳遞的選擇器（S）作爲參數的函數。然後，您只需使用這些參數作爲變量即可知道要隱藏或顯示哪些參數。

<script> 
    var x = jQuery.noConflict(); 

    function foo(selector1,selector2){ 
    x(selector1).hide(); 
    x(selector2).click(function(){ 
     x(selector1).slideToggle(200); 
    }) 
    }; 

    foo(".jab .jabcierre1","h2.c1"); 
</script> 

Answer 3

你可以把類名到一個數組，遍歷這個：

x(function() { 

    var elements = [".jab .jabcierre1", ".jab .jabcierre2"]; 
    var controls= ["h2.c1", "h2.c2"]; 

    for (var n = 0; n < elements.length; n++) 
    { 
     x(elements[n]).hide(); 
     x(controls[n]).click(function(){ 
      x(elements[n]).slideToggle(200); 
     }); 

}); 

Answer 4

你可以有共同的類名稱，甚至使用H2和使用$（這）運算符來指定一個期待。 $（this）在你的點擊事件處理程序中會給你點擊的對象。希望這可以幫助。這應該做的。

<script> 
var x = jQuery.noConflict(); 
x(function(){ 
x(".jab").hide(); 
x("h2").on("click",function() { 
    x(this).slideToggle(200); 
}); 
}); 
</script> 

Answer 5

使用«同時»循環？

var varCount = 1; 
while (varCount < 5){ 
    x(function(){ 
     x(".jab .jabcierre"+varCount).hide(); 
     x("h2.c"+varCount).click(function(){ 
      x(".jab .jabcierre"+varCount).slideToggle(200); 
     }); 
    }); 
}; 

Answer 6

它看起來像你可能想走一點DOM。希望類似this fiddle的東西能讓您瞭解如何針對您的具體問題進行操作。

總體思路是在下面找到要製作可點擊的標題，然後將DOM構建得足夠好，以便可以將其移動到您希望控制的div。

$('h2').click(function(el) { 
    var hideme = $(el.target).next(); 
    hideme.toggle(); 
});