Question

我是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>

Answer 1

拥有一个单独的JS块，在此块中只调用ready（这只是$函数）：

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

         $("#whatever").click(function() {
           // stuff
         });

         $("#somethingelse").click(function() {
           // stuff
         });
     });
  </script>

另外，尝试使用类和html布局而不是显式ID。例如，如果所有可点击的项目都是button s，并且信息div位于它们之后，则可以简化此操作：

 $("#foobar").click(function() {
     $("#foobarinfo").slideToggle("slow");
 });
 $("#blah").click(function() {
     $("#blahinfo").slideToggle("slow");
 });
 //etc, many many times

类似于：

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

我猜你的整段代码可以用三到四行重写。如果您有兴趣，请随意分享您的HTML标记。

Answer 2

类似的东西：

    <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>

Answer 3

在结合并持续使用$ sign for jquery后，我们得到类似的结果：

<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>

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

3 个答案: