Javascript 将多个Jquery函数组合成单个函数

我对jquery非常陌生，不知道如何组合jquery函数。现在，我的代码有点乱！我做了一些研究，但在组合函数时无法使其正常工作。我不想让我的代码看起来像这样，但至少目前它工作正常（除了Firefox）。组合功能的最佳实践是什么

    <script type="text/javascript">
$( document ).ready(function() {
    jQuery(function(){
      jQuery("#music").click(function () {
        jQuery("#musicinfo").slideToggle('slow');
        jQuery("#fpinfo, #behindinfo, #behindinfo, #signupinfo").hide('slow');

      });
    });
    });
</script>





<script type="text/javascript">
$( document ).ready(function() {
    jQuery(function(){
      jQuery("#fproduct").click(function () {
        jQuery("#fpinfo").slideToggle('slow');
        jQuery("#musicinfo, #behindinfo, #behindinfo, #signupinfo").hide('slow');

      });
    });
    });
</script>




<script type="text/javascript">
$( document ).ready(function() {
    jQuery(function(){
      jQuery("#behind").click(function () {
        jQuery("#behindinfo").slideToggle('slow');
        jQuery("#fpinfo, #musicinfo, #signupinfo").hide('slow');

      });
    });
    });
</script>

  <script type="text/javascript">
  $( document ).ready(function() {
    jQuery(function(){
      jQuery(".exit").click(function () {
        jQuery("#behindinfo, #musicinfo, #fpinfo, #signupinfo").hide('slow');

      });
    });
    });
</script>

<script type="text/javascript">
$( document ).ready(function() {
    jQuery(function(){
      jQuery("#signup").click(function () {
        jQuery("#signupinfo").slideToggle('slow');
        jQuery("#fpinfo, #musicinfo, #behindinfo").hide('slow');

      });
    });
    });
</script>

  <script type="text/javascript">
  $( document ).ready(function() {
    jQuery(function(){
      jQuery(".exit").click(function () {
        jQuery("#behindinfo, #musicinfo, #fpinfo, #signupinfo").hide('slow');

      });
    });
    });
</script>



<script>
     $('#behind, #fproduct, #music, #signup').click(function(){
         var divLoc = $('#top').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
</script>

$（文档）.ready（函数（）{
jQuery（函数（）{
jQuery（“音乐”）。单击（函数（）{
jQuery（“musicinfo”）.slideToggle（“slow”）；
jQuery（“#fpinfo，#behindinfo，#behindinfo，#signupinfo”）.hide（'slow'）；
});
});
});
$（文档）.ready（函数（）{
jQuery（函数（）{
jQuery（“#fpproduct”）。单击（函数（）{
jQuery（“#fpinfo”）.slideToggle（'slow'）；
jQuery（#musicinfo，#behindinfo，#behindinfo，#signupinfo”）.hide（'slow'）；
});
});
});
$（文档）.ready（函数（）{
jQuery（函数（）{
jQuery（“#后面”）。单击（函数（）{
jQuery（“#behindinfo”）.slideToggle（'slow'）；
jQuery（#fpinfo，#musicinfo，#signupinfo”）.hide（'slow'）；
});
});
});
$（文档）.ready（函数（）{
jQuery（函数（）{
jQuery（“.exit”）。单击（函数（）{
jQuery（#behindinfo，#musicinfo，#fpinfo，#signupinfo”）.hide（'slow'）；
});
});
});
$（文档）.ready（函数（）{
jQuery（函数（）{
jQuery（“#注册”）。单击（函数（）{
jQuery（“#signupinfo”）.slideToggle（'slow'）；
jQuery（“#fpinfo，#musicinfo，#behindinfo”）.hide（'slow'）；
});
});
});
$（文档）.ready（函数（）{
jQuery（函数（）{
jQuery（“.exit”）。单击（函数（）{
jQuery（#behindinfo，#musicinfo，#fpinfo，#signupinfo”）.hide（'slow'）；
});
});
});
$（“#behind，#fproduct，#music，#signup”）。单击（函数（）{
var divLoc=$（'#top'）.offset（）；
$（'html，body'）.animate（{scrollTop:divLoc.top}，“slow”）；
});

有一个单独的JS块，在这个块中，一次调用

ready

（这只是

$

函数）：

例如：

  $("button").click(function() {
     $(this).next().slideToggle("slow");
  });
  // that's all

我想你的整个代码可以在三到四行中重写。如果您感兴趣，请随时分享您的html标记。

类似的内容：

    <script type="text/javascript">
$( document ).ready(function() {

      jQuery("#music").click(function () {
        jQuery("#musicinfo").slideToggle('slow');
        jQuery("#fpinfo, #behindinfo, #behindinfo, #signupinfo").hide('slow');

      });


      jQuery("#fproduct").click(function () {
        jQuery("#fpinfo").slideToggle('slow');
        jQuery("#musicinfo, #behindinfo, #behindinfo, #signupinfo").hide('slow');

      });

        jQuery("#behind").click(function () {
        jQuery("#behindinfo").slideToggle('slow');
        jQuery("#fpinfo, #musicinfo, #signupinfo").hide('slow');

      });

       jQuery(".exit").click(function () {
        jQuery("#behindinfo, #musicinfo, #fpinfo, #signupinfo").hide('slow');

      });

      jQuery("#signup").click(function () {
        jQuery("#signupinfo").slideToggle('slow');
        jQuery("#fpinfo, #musicinfo, #behindinfo").hide('slow');

      });

      jQuery(".exit").click(function () {
        jQuery("#behindinfo, #musicinfo, #fpinfo, #signupinfo").hide('slow');

      });

    $('#behind, #fproduct, #music, #signup').click(function(){
         var divLoc = $('#top').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
    });


</script>

$（文档）.ready（函数（）{
jQuery（“音乐”）。单击（函数（）{
jQuery（“musicinfo”）.slideToggle（“slow”）；
jQuery（“#fpinfo，#behindinfo，#behindinfo，#signupinfo”）.hide（'slow'）；
});
jQuery（“#fpproduct”）。单击（函数（）{
jQuery（“#fpinfo”）.slideToggle（'slow'）；
jQuery（#musicinfo，#behindinfo，#behindinfo，#signupinfo”）.hide（'slow'）；
});
jQuery（“#后面”）。单击（函数（）{
jQuery（“#behindinfo”）.slideToggle（'slow'）；
jQuery（#fpinfo，#musicinfo，#signupinfo”）.hide（'slow'）；
});
jQuery（“.exit”）。单击（函数（）{
jQuery（#behindinfo，#musicinfo，#fpinfo，#signupinfo”）.hide（'slow'）；
});
jQuery（“#注册”）。单击（函数（）{
jQuery（“#signupinfo”）.slideToggle（'slow'）；
jQuery（“#fpinfo，#musicinfo，#behindinfo”）.hide（'slow'）；
});
jQuery（“.exit”）。单击（函数（）{
jQuery（#behindinfo，#musicinfo，#fpinfo，#signupinfo”）.hide（'slow'）；
});
$（“#behind，#fproduct，#music，#signup”）。单击（函数（）{
var divLoc=$（'#top'）.offset（）；
$（'html，body'）.animate（{scrollTop:divLoc.top}，“slow”）；
});
});

在对jquery合并并一致使用$sign之后，我们得到如下结果：

<script type="text/javascript">
$( document ).ready(function() {

    $("#music").click(function () {
            $("#musicinfo").slideToggle('slow');
            $("#fpinfo, #behindinfo, #behindinfo, #signupinfo").hide('slow');
            });
    $("#behind").click(function () {
        $("#behindinfo").slideToggle('slow');
        $("#fpinfo, #musicinfo, #signupinfo").hide('slow');
            });
    $("#fproduct").click(function () {
        $("#fpinfo").slideToggle('slow');
        $("#musicinfo, #behindinfo, #behindinfo, #signupinfo").hide('slow');
            });
    $(".exit").click(function () {
        $("#behindinfo, #musicinfo, #fpinfo, #signupinfo").hide('slow');
            });
    $("#signup").click(function () {
        $("#signupinfo").slideToggle('slow');
        $("#fpinfo, #musicinfo, #behindinfo").hide('slow');

            });
      $(".exit").click(function () {
        $("#behindinfo, #musicinfo, #fpinfo, #signupinfo").hide('slow');

      });

     $('#behind, #fproduct, #music, #signup').click(function(){
         var divLoc = $('#top').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
});
</script>

$（文档）.ready（函数（）{
$（“#音乐”）。单击（功能（）{
$（“#音乐信息”）.slideToggle（'slow'）；
$（“#fpinfo，#behindinfo，#behindinfo，#signupinfo”）.hide（'slow'）；
});
$（“#后面”）。单击（函数（）{
$（“#behindinfo”）.slideToggle（'slow'）；
$（“#fpinfo，#musicinfo，#signupinfo”）.hide（'slow'）；
});
$（“#fproduct”）。单击（函数（）{
$（“#fpinfo”）.slideToggle（'slow'）；
$（“#musicinfo，#behindinfo，#behindinfo，#signupinfo”）.hide（'slow'）；
});
$（“.exit”）。单击（函数（）{
$（“#behindinfo，#musicinfo，#fpinfo，#signupinfo”）.hide（'slow'）；
});
$（“#注册”）。单击（函数（）{
$（“#注册信息”）.slideToggle（'slow'）；
$（“#fpinfo，#musicinfo，#behindinfo”）.hide（'slow'）；
});
$（“.exit”）。单击（函数（）{
$（“#behindinfo，#musicinfo，#fpinfo，#signupinfo”）.hide（'slow'）；
});
$（“#behind，#fproduct，#music，#signup”）。单击（函数（）{
var divLoc=$（'#top'）.offset（）；
$（'html，body'）.animate（{scrollTop:divLoc.top}，“slow”）；
});
});

我认为这更适合于。听起来你不想组合函数。看起来您正在尝试合并脚本块。简单的答案是，只需将所有代码复制到一个块就绪函数中即可。至于代码应该如何布局，codereview确实是一个很好的地方，欢迎您。您还可以将“JQuery”替换为“$”。

    <script type="text/javascript">
$( document ).ready(function() {

      jQuery("#music").click(function () {
        jQuery("#musicinfo").slideToggle('slow');
        jQuery("#fpinfo, #behindinfo, #behindinfo, #signupinfo").hide('slow');

      });


      jQuery("#fproduct").click(function () {
        jQuery("#fpinfo").slideToggle('slow');
        jQuery("#musicinfo, #behindinfo, #behindinfo, #signupinfo").hide('slow');

      });

        jQuery("#behind").click(function () {
        jQuery("#behindinfo").slideToggle('slow');
        jQuery("#fpinfo, #musicinfo, #signupinfo").hide('slow');

      });

       jQuery(".exit").click(function () {
        jQuery("#behindinfo, #musicinfo, #fpinfo, #signupinfo").hide('slow');

      });

      jQuery("#signup").click(function () {
        jQuery("#signupinfo").slideToggle('slow');
        jQuery("#fpinfo, #musicinfo, #behindinfo").hide('slow');

      });

      jQuery(".exit").click(function () {
        jQuery("#behindinfo, #musicinfo, #fpinfo, #signupinfo").hide('slow');

      });

    $('#behind, #fproduct, #music, #signup').click(function(){
         var divLoc = $('#top').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
    });


</script>

<script type="text/javascript">
$( document ).ready(function() {

    $("#music").click(function () {
            $("#musicinfo").slideToggle('slow');
            $("#fpinfo, #behindinfo, #behindinfo, #signupinfo").hide('slow');
            });
    $("#behind").click(function () {
        $("#behindinfo").slideToggle('slow');
        $("#fpinfo, #musicinfo, #signupinfo").hide('slow');
            });
    $("#fproduct").click(function () {
        $("#fpinfo").slideToggle('slow');
        $("#musicinfo, #behindinfo, #behindinfo, #signupinfo").hide('slow');
            });
    $(".exit").click(function () {
        $("#behindinfo, #musicinfo, #fpinfo, #signupinfo").hide('slow');
            });
    $("#signup").click(function () {
        $("#signupinfo").slideToggle('slow');
        $("#fpinfo, #musicinfo, #behindinfo").hide('slow');

            });
      $(".exit").click(function () {
        $("#behindinfo, #musicinfo, #fpinfo, #signupinfo").hide('slow');

      });

     $('#behind, #fproduct, #music, #signup').click(function(){
         var divLoc = $('#top').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
});
</script>