如何让我的代码不那么冗长

Question

我在 Wordpress 中使用 jQuery，它的功能完全符合我的预期。问题是我不得不 re-write 我正在使用的功能 4 次（目前，可能会更多）用于 SAME 操作。我知道必须有一种方法可以避免使用 $(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>

但是正如您所知，这样做的全部目的是隐藏包含我想要隐藏的 html 的 div，并在单击 h2 标题时显示 div。我必须给每个 h2 一个 class 的 1、2、3 等等，这样当点击标题 (h2) 时它就不会触发页面中的所有 h2，这就是为什么我不得不求助于 re-writing这个函数我每次都加一个新的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

您可以创建一个函数，将选择器作为参数传递给该函数。然后您只需将这些参数用作变量即可知道要隐藏或显示哪些。

<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 2

您可以将 class 个名称放入一个数组中并对其进行迭代：

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 3

您可以使用通用的 class 名称，甚至可以使用 h2 和 $(this) 运算符来指定期望的名称。单击事件处理程序中的 $(this) 将为您提供被单击的对象。希望这可以帮助。这应该可以。

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

Answer 4

像这样

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

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

Answer 5

使用 «while» 循环？

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 的内容能让您了解如何处理您的特定问题。

总体思路如下，您可以在下方找到要使其可点击的 headers，然后对 DOM 进行足够的结构化，以便您可以将其移动到您想要点击的 div想控制。

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

如何让我的代码不那么冗长

How To Make My Code Less Verbose

jquery

wordpress

this