Javascript 有没有更好的方法来编写这个jquery，使它'；只有3个功能？

所以我对jquery不是很在行，但是有没有办法合并所有相同点击的代码，这样我就只有3个函数了？一个more函数、一个next函数和一个close函数。我试过了，但当我试过的时候，他们就不工作了

$(document).ready(function(){
    $('a.more').click(function(){
        $(this).parent().addClass('active');
    });

    $('a.more').click(function(){
        $(this).parent().siblings().addClass('hide');
    });

    $('a.more').click(function(){
        var load = $(this).parent().attr('id');
        $('#'+load+'1').load(''+load+'.html');
    });

    $('a.close').click(function(){
        $(this).parent('.card').removeClass('active');
    });

    $("a.close").click(function(){
        $(this).parent().siblings().removeClass('hide');
    });
    $('a.close').click(function(){
        var load = $(this).parent().attr('id');
        $('#'+load+'1').empty();
    });

    $('a.next').click(function(){
        $(this).parent('.card').removeClass('active');
    });

    $('a.next').click(function(){
        var load = $(this).parent().attr('id');
        $('#'+load+'1').empty();
    });

    $('a.next').click(function(){
        $(this).parent('.card').addClass('hide');
    });

    $('a.next').click(function(){
        $(this).parent().next('.card').removeClass('hide');
    });

    $('a.next').click(function(){
        $(this).parent().next('.card').addClass('active');
    });

    $('a.next').click(function(){
        var load = $(this).parent().next('.card').attr('id');
        $('#'+load+'1').load(''+load+'.html');
    });
});

这应该有用

 $(document).ready(function(){
          $('a.more').click(function(){
            $(this).parent().addClass('active');
            $(this).parent().siblings().addClass('hide');
            var load = $(this).parent().attr('id');
            $('#'+load+'1').load(''+load+'.html');
   });
.. etc same for other functions

只需将同一事件的部分合并到一个函数中

或者像le commenteur指出的那样更高效

 $(document).ready(function(){
          $('a.more').click(function(){
            var elParent=$(this).parent;
            elParent.addClass('active');
            elParent.siblings().addClass('hide');
            var load = elParent.attr('id');
            $('#'+load+'1').load(''+load+'.html');
   });
.. etc same for other functions

---

很简单，只需组合事件处理程序的内容

$(document).ready(function(){
    $('a.more').click(function(){
        $(this).parent().addClass('active');
        $(this).parent().siblings().addClass('hide');
        var load = $(this).parent().attr('id');
        $('#'+load+'1').load(''+load+'.html');
    });

    $('a.close').click(function(){
        $(this).parent('.card').removeClass('active');
        $(this).parent().siblings().removeClass('hide');
        var load = $(this).parent().attr('id');
        $('#'+load+'1').empty();
    });

    $('a.next').click(function(){
        $(this).parent('.card').removeClass('active');
        var load = $(this).parent().attr('id');
        $('#'+load+'1').empty();
        $(this).parent('.card').addClass('hide');
        $(this).parent().next('.card').removeClass('hide');
        $(this).parent().next('.card').addClass('active');
        var load = $(this).parent().next('.card').attr('id');
        $('#'+load+'1').load(''+load+'.html');
    });
});

---

有很多事情可以优化。通常，您需要使用更多的点语法，避免重新生成jquery对象，并为同一选择器使用多个侦听器，因为它们会降低性能。我不会重写你的代码，但我会给你一些提示

例如，从user2808054开始回答

$(document).ready(function(){
      $('a.more').click(function(){
        $(this).parent().addClass('active');
        $(this).parent().siblings().addClass('hide');
        var load = $(this).parent().attr('id');
        $('#'+load+'1').load(''+load+'.html');
});

可以写

 $(document).ready(function () {
     $('#whatever').click(function () {
       var _parent = $(this).parent(),
       _id = _parent.attr('id');

       _parent.addClass('active').siblings().addClass('hide');
       $('#' + _id + '1').load('' + _id + '.html');
    });
 })

如果你想在变量上保持紧密的联系

  $(document).ready(function () {
     $('#whatever').click(function () {
       var _parent = $(this).parent();
       _parent.addClass('active').siblings().addClass('hide');
       $('#' + _parent.attr('id') + '1').load('' + _parent.attr('id') + '.html');
    });
 })

同样，也没有理由将同一个侦听器拆分为多个，这会消耗资源，而是只拆分一个侦听器，如果现在您想将逻辑拆分为单独的函数，并从侦听器调用它们

不过我更喜欢这种格式，因为它更干净，而且你是为人而不是为机器而写的

  $(document).ready(function () {
     $('#whatever').click(function () {
       var _parent = $(this).parent(),
       _id = _parent.attr('id');

       _parent
         .addClass('active')
         .siblings()
           .addClass('hide');

       $('#' + _id + '1')
         .load('' + _id + '.html');
    });
  });

---

考虑一下为什么你不把它们组合在一起？这个问题属于堆栈交换网络的另一个站点，除非你真的没有听说过那个网站，否则他们就不应该破解，抱歉，我会把它加入书签。我不知道为什么，我试了好几次，试着像答案一样组合，结果都失败了。但是亚历克斯的仿意大利面效果很好；有时我讨厌技术：（干式警报：）$（this.parent（）你做了三次“干式”吗？对此不熟悉…不要重复$（this.parent（）.addClass（'active'）$（this）.parent（）.sides（）.addClass（'hide'），这可能是var_parent$（this）.parentOne变量在我复制它时实际上不起作用。谢谢。对不起，我不知道其他网站。