问如何使我的代码不那么冗长
EN

Stack Overflow用户

提问于 2015-02-10 12:31:05

回答 6查看 156关注 0票数 0

我在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>

但是，正如您所知道的，这样做的全部目的是隐藏一个包含我想要隐藏的html的div，并在单击h2标题时显示该div。我必须给每个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>

this

jquery

wordpress

回答 6

Stack Overflow用户

回答已采纳

发布于 2015-02-10 12:43:30

就像这样

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

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

票数 1

Stack Overflow用户

发布于 2015-02-10 12:41:06

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

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

票数 0

Stack Overflow用户

发布于 2015-02-10 12:42:13

您可以将类名放入数组并迭代如下：

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

});