Question

对于jQuery，我是一个真正的新手。我真的不明白如何正确使用'this'。我有三个代码块，几乎完全相同，但是对于不同的元素。我想知道是否可以使用'this'来删除此代码。这是我的代码。

非常感谢任何帮助!!

    $(".shop-links1:contains('Tops')").click(function(){//Sort by tops
        $(".tops").show().appendTo("#tabs-1");
        $(".tunics").hide();
        $(".dresses").hide();
        $("#tabs ul li.a:not(:first)").animate
          ({height:'hide'}, 'slow') 
    });

    $(".shop-links1:contains('Tunics')").click(function(){//Sort by tunics
        $(".tops").hide();
        $(".tunics").show().appendTo("#tabs-1");
        $(".dresses").hide();
        $("#tabs ul li.a:not(:first)").animate
          ({height:'hide'}, 'slow') 
    });

    $(".shop-links1:contains('Dresses')").click(function(){//Sort by dresses
        $(".tops").hide();
        $(".tunics").hide();
        $(".dresses").show().appendTo("#tabs-1");
        $("#tabs ul li.a:not(:first)").animate
          ({height:'hide'}, 'slow') 
    });

由于

克里斯

Answer 1

猜测你的HTML，你可能有这样的东西吗？

<a class="shop-links1">Tops</a>
<a class="shop-links1">Tunics</a>
<a class="shop-links1">Dresses</a>

<div class="tops">
    <!-- ... -->
</div>

<div class="tunics">
    <!-- ... -->
</div>

<div class="dresses">
    <!-- ... -->
</div>

我会添加一个类做你的内容div，称之为“服装类别”，所以你有这个：

<div class="dresses clothing-category">
    <!-- ... -->
</div>

这样的事情应该可行：

$(document).ready(function() {
    $(".shop-links1").click(function(){
        $(".clothing-category").hide();
        // might need to lower-case the text here to get it to match
        $("#"+$(this).text()).show().appendTo("#tabs-1");
        $("#tabs ul li.a:not(:first)").animate
          ({height:'hide'}, 'slow') 
    });
});

如果它不起作用，请更改链接以使其控制的div ID具有单独的属性，如下所示：

<a class="shop-links1" category="tops">Tops</a>
<a class="shop-links1" category="tunics">Tunics</a>
<a class="shop-links1" category="dresses">Dresses</a>

然后点击功能的可疑行将是：

$("#"+$(this).attr('category')).show().appendTo("#tabs-1");

再次修改：注意到你正在为tops，tunics等指定类选择器，我输入了一个id选择器。如果出于某种原因，您不希望在不同类别的元素上使用id，则可以轻松更改为类选择器。这样做：

$("."+$(this).attr('category')).show().appendTo("#tabs-1");
// ^--- big difference here

编辑：我不明白您要使用appendTo完成的工作。如果元素已经在DOM中（它必须在某个地方，因为你没有在脚本中创建它），那么只需在其上调用.show()就足以让它出现了。我对appendTo的理解是，你最终会复制dom中的很多元素，导致同一类别的倍数显示出来。那是你要的吗？如果是这样，那似乎很奇怪。

我还需要查看您用于#tabs的标记，以确定动画线正在做什么。我不承认，因为我不确定这里的重写是否会对ul＆amp; li你正在制作动画。

编辑第三个：我刚刚将您的点击处理程序与$(".shop-links1").unbind('click')取消绑定后，我在您网站上的chrome dev控制台中对此进行了测试。这与您拥有的三个点击处理程序的工作原理相同：

$(".shop-links1").click(function(){
    $(".tops, .tunics, .dresses").hide();
    $("."+$(this).text().toLowerCase()).show();
    $("#tabs ul li.a:not(:first)").animate
      ({height:'hide'}, 'slow') 
});

我现在了解您的标签，但是appendTo并没有按照您的想法执行。它实际上会移动dom中的项目，将它们添加到<section id="firstNineItems">之后的第一个标签中，然后将其从<section id="secondNineItems">（或其中任何一个）中删除，同时留下空<section class="catalogListing">标签。你的标记和方式的方式如果设置了样式，则不需要在第一个选项卡中显示元素，即使它看起来像是第一个选项卡被选中。

隐藏动画的工作方式与您描述的相似，但没有任何内容可以将其他选项卡返回到页面上。我猜你还没有把它清理干净。如果你无法弄清楚如何重新加入分页，那么就可以开始工作并提出另一个问题，但看起来它可能会在你第一次起作用时发挥作用。

另外两个随机点：

这是家庭作业吗？如果是这样的话，那么对于社区而言，这被认为是一种很好的形式来标记你的问题，不仅对于社区而言，那么无论是谁在评估你的表现，你都不会试图为别人的工作赢得荣誉。（过去常常有homework的问号，但我认为它被遗忘了。
您在网站上有很多内联样式。如果将它们转换为css规则，你可能会在将来节省时间。

编辑最后一个：我修剪了你的小提琴并取消了jquery-ui标签小部件。我用一些自定义的js重写了标签，可能是25行左右。所需的html结构有所不同，<section class="catalogListing">和<div="description">对已经缩小为一个部分，没有<section class="first|second|thirdnineItems">个标签。小提琴的花边和口哨较少，主要是因此我不需要与显示器对抗以显示相关部分。标记的目录列表部分应该能够与javascript一起放置到位。您必须调整代码以使其余的过滤器工作（价格范围，种类，艺术家，收藏等）。 http://jsfiddle.net/8uYyG/3/

我意识到这可能不是什么'for'，但我玩得很开心。在将来，我真的建议使用框架（例如Ember，Backbone或Knockout（我最喜欢的））来执行这样的单页应用。祝你好运。

三块代码几乎完全相同。如何使用'this'将这些减少到一个块？

1 个答案: