1

当谈到 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') 
    });

谢谢

克里斯

4

1 回答 1

0

猜测你的 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&做正确的事情。li

编辑第 3 个：我刚刚在您的网站上的 chrome 开发控制台中测试了这个，在使用 this: 取消绑定您的点击处理程序后$(".shop-links1").unbind('click')。这与您拥有的三个点击处理程序相同：

$(".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">标签。设置标记和样式的方式，您不需要元素出现在第一个选项卡中，即使看起来第一个选项卡已被选中。

隐藏动画像您描述的那样工作，但没有其他选项卡回到页面上。我猜你还没有连接清除备份。如果您无法弄清楚如何恢复分页，请让它发挥作用并问另一个问题，但看起来它可能会在您第一次挥杆时起作用。

另外两个随机点：

  1. 这是家庭作业吗？如果是这种情况，适当地标记您的问题被认为是一种很好的形式，不仅是为了社区，而且无论谁评估您的表现，您都清楚您不是试图将他人的工作归功于他人。（所以曾经有一个问题标签，homework但我认为它被投票遗忘了）。
  2. 您在网站上有很多内联样式。如果将它们转换为 css 规则，您将来可能会节省时间。

编辑最后一个：我修剪了您的小提琴并取消了 jquery-ui 选项卡小部件。我用一些自定义的 js 重新编写了选项卡，大概 25 行左右。所需的 html 结构非常不同，<section class="catalogListing">and<div="description">对已缩小到一个部分，没有<section class="first|second|thirdnineItems">标签。小提琴的花里胡哨的东西要少得多，主要是这样我就不必为了让相关部分出现而与显示器作斗争。标记的目录列表部分应该能够与 javascript 一起放置到位。您必须调整代码以使其余过滤器正常工作（价格范围、排序、艺术家、收藏等）。http://jsfiddle.net/8uYyG/3/

我意识到这可能不是 SO 的“目的”，但我玩得很开心。将来，我真的会推荐使用框架（如Ember、Backbone或Knockout（我最喜欢的））来制作这样的单页应用程序。祝你好运。

于 2013-02-27T20:13:49.867 回答