Jquery 三段代码几乎完成了相同的任务。如何使用'；这个'；？

对于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') 
    });

谢谢

---

克里斯

猜猜你的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 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>

再次编辑：刚刚注意到您正在为

上衣

、

束腰外衣

等指定类选择器，我输入了一个id选择器。如果出于某种原因您不希望不同类别的元素上有id，那么很容易更改为类选择器。改为这样做：

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

编辑：我不明白您想用

附录来完成什么。如果元素已经在DOM中（它必须在某个地方，因为您没有在脚本中创建它），那么只要对其调用
.show（）
，就足以使它出现。我对的理解是，最终会复制dom中的许多元素，导致同一类别的多个元素出现。这就是你想要的吗？如果是这样的话，这似乎很奇怪

我还需要查看您在
#tabs
中使用的标记，以了解动画行正在做什么。我否认这一点，因为我不确定这里的重写是否会对您正在制作的
ul
&
li
进行正确的处理

编辑第三个：我刚刚在你的站点上的chrome开发控制台中测试了这一点，然后将你的点击处理程序解除绑定：
$（“.shop-links1”）。解除绑定（'click'）
。这与您拥有的三个单击处理程序的工作原理相同：

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

我现在明白你的标签了，但是附件并不像你想象的那样。它实际上会移动dom中的项，将它们添加到
之后的第一个选项卡，并将它们从
中删除（或从任何一个选项卡中删除），同时留下空的
标记。按照设置标记和样式的方式，不需要在第一个选项卡中显示元素，即使看起来第一个选项卡已被选中

“隐藏”动画的工作原理与您描述的相同，但没有任何内容将其他选项卡恢复到页面上。我想你还没有给清障人士回电话。如果你想不出如何恢复分页，那就去问另一个问题，但是看起来它可能会在你第一次使用它时起作用

另外两个随机点：

这是家庭作业吗？如果是这样的话，恰当地标记你的问题被认为是一种良好的形式，不仅对社区如此，无论是谁评估你的表现，都清楚你没有试图为别人的工作赢得荣誉。（所以以前在
家庭作业
中有一个问号，但我认为它被投票遗忘了）

网站上有很多内联样式。如果将它们转换为css规则，将来可能会节省时间
编辑最后一个：我修剪了你的小提琴，去掉了jquery ui选项卡小部件。我用一些自定义js重新编辑了标签，大概25行左右。所需的html结构大不相同，
和
对已缩小为一个部分，没有
标记。小提琴的钟声和口哨声要少得多，这样我就不必为了让相关的部分出现而与显示器抗争了。标记的目录列表部分应该能够与javascript一起放置到位。您必须调整代码以使其余过滤器正常工作（价格范围、排序、艺术家、收藏等）

我意识到这可能不是所谓的“目的”，但我玩得很开心。在将来，我真的会推荐使用一个框架（比如，或者（我最喜欢的））做一个这样的单页应用程序。祝你好运。
你的HTML是什么样子的？你到底想达到什么目的？你能建立一个简单的网站吗？这就是网站：商店链接位于左边。单击顶部将所有顶部追加到第一个选项卡中。如果单击裙子或束腰外衣，也会发生同样的情况。单击其中一个按钮时，必须隐藏其他按钮。动画只是让标签2和标签3以一种很酷的方式消失。这不是一项任务，而是我让自己学习jQuery的一项实践任务。内联稍后将被删除，我发现如果它们位于同一个文档中，则更容易删除，直到我对所有内容进行了适当的样式设置。你的权利，清除功能不再工作，因为我编辑了很多网站。我需要再次编写代码，但还没有完成。非常感谢您的时间和帮助，但我仍然无法使用您提供的简化版本的代码使其正常工作。我不太了解appendTo，但如果我不使用它，网站就不能正常运行。目前它100%有效，但我的总体目标是减少代码使用量。什么不起作用？是否删除了其他单击处理程序？没有
附录的旧函数中有什么“坏”的？尝试将其添加回我发布的最后一个单击函数，看看是否可以修复它。很抱歉重复CSS，我想我知道其他开发人员也会使用CSS进行原型设计，但这仍然让我在上一份工作中维护web/桌面应用程序时感到不安。哦，你用的是什么浏览器，它不工作？
$("#"+$(this).attr('category')).show().appendTo("#tabs-1");

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

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