Javascript 我可以改进jQuery代码重复吗？

我想学习jQuery的最佳实践，以及如何避免代码重复和使用优雅的代码

我写过：

<script type="text/javascript">
  // Change the category name with the filter
  $(function() {

    // Featured
    $('.featured').click(function() {
      $('.categoryTitle h1').hide().html('Featured').fadeIn('slow');
    });
    // Web
    $('.web').click(function() {
      $('.categoryTitle h1').hide().html('Web').fadeIn('slow');
    });
    // Brand
    $('.brand').click(function() {
      $('.categoryTitle h1').hide().html('Brand').fadeIn('slow');
    });
    // Print
    $('.print').click(function() {
      $('.categoryTitle h1').hide().html('Print').fadeIn('slow');
    });
    // All
    $('.all').click(function() {
      $('.categoryTitle h1').hide().html('All').fadeIn('slow');
    });
  });
</script>

HTML

这是尽可能的优雅，还是我错过了如何停止跳入DOM

注意，我使用的是同位素，一个jQuery插件

编辑当前没有一个答案正在更改categoryTitle，但我建议它的默认值为Featured。

这应该可以做到：

function change(id){
$('.categoryTitle h1').hide().html(id).fadeIn('slow');
}

<script type="text/javascript">
$(function() {
    $('#filters').on('click', 'a', function() {
        $('.categoryTitle h1').hide().html($(this).text()).fadeIn('slow');
    });
});
</script>

这应该做到：

<script type="text/javascript">
$(function() {
    $('#filters').on('click', 'a', function() {
        $('.categoryTitle h1').hide().html($(this).text()).fadeIn('slow');
    });
});
</script>

---

就这么简单：

  $('#filters a').click(function() {
        $('.categoryTitle h1').hide().html($(this).text()).fadeIn('slow');
  });

---

就这么简单：

  $('#filters a').click(function() {
        $('.categoryTitle h1').hide().html($(this).text()).fadeIn('slow');
  });

试试这个

试试这个

---

---

是的，清理的一部分需要在你的HTMl中。对，清理的一部分需要在你的HTMl中。把它也贴出来我想这行不通，因为h1似乎不是$this的子元素。它没有更新分类。请查看我的回答中的演示链接。我一生都无法找出为什么这对我不起作用。请查看控制台，如果发现错误，也可以向我们显示页面，如果它是活的，您在哪里遇到错误我认为这不起作用，由于h1似乎不是$this的子元素。它没有更新类别。请查看我回答中的演示链接。我无法用一生的时间来找出为什么这对我不起作用。如果发现错误，请查看控制台，如果它是live，请向我们显示页面，如果它是live，则您会收到错误。很遗憾，它没有从过滤器aOh获取文本真的吗？奇怪的我知道了。请注意，我添加了e.preventDefault-如果您愿意，可以省略它，但它会停止将字符片段默认附加到URL。categoryTitle h1的默认值为FeaturedI我不确定我是否理解-默认值将是HTML中的任何内容。在我的示例中，我将其留空。你是说我的例子不适合你吗？您使用的是哪个版本的jQuery，是否存在任何控制台错误？如果您使用的是旧版本，您可能需要将.on改为.bind。我也很困惑-我现在使用的是jQuery 1.8.0。遗憾的是，它没有从过滤器aOh获取文本真的吗？奇怪的我知道了。请注意，我添加了e.preventDefault-如果您愿意，可以省略它，但它会停止将字符片段默认附加到URL。categoryTitle h1的默认值为FeaturedI我不确定我是否理解-默认值将是HTML中的任何内容。在我的示例中，我将其留空。你是说我的例子不适合你吗？您使用的是哪个版本的jQuery，是否存在任何控制台错误？如果您使用的是较旧的版本，您可能需要将.on改为.bind。我也很困惑-我现在正在使用jQuery 1.8.0。

$(document).ready(function(){
   $('ul#filters li a').click(function(){
           $('.categoryTitle h1').hide().html($(this).text()).fadeIn('slow')

   });
});