Question

我在Wordpress中使用jQuery，它正在做我期望它做的事情。问题是我不得不重新编写我正在使用的函数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一个1,2,3等等的类，这样当点击标题（h2）时，它不会触发页面中的所有h2，这就是为什么我不得不求助于重写每个函数我添加一个新的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

您可以创建一个函数，将选择器作为参数传递到该函数中。然后，您只需将这些参数用作变量，以了解要隐藏或显示的内容。

<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）运算符来指定期望的类名。单击事件处理程序中的$（this）将为您提供单击的对象。希望这可以帮助。这应该做。

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

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

一般的想法是在下面找到你想要点击的标题，然后你构建足够的DOM，这样你就可以把它带到你想要控制的div。

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

如何使我的代码更简洁

6 个答案: