Question

我添加了jQuery函数，可以在滚动时显示和隐藏导航栏。当按钮开始时我也想隐藏一个div。点击。添加新功能后，它们的工作时间都不会更长。我试图将它添加到各个地方，但我仍然没有得到任何结果。那么如何添加多个功能并让它们起作用呢？

继承我的代码：

<script>
    // function that hides text on click 
    (function($) {
            $('#start').click(function() {
                    $('.lead').hide());
            });
    });
    // my original function that stopped working after i added new one
    (function($) {
        $(document).ready(function() {
            $(".masthead").css("background-color", "inherit");
            // fade in .navbar
            $(function() {
                $(window).scroll(function() {
                    // set distance user needs to scroll before we fadeIn navbar
                    if($(this).scrollTop() > 600) {
                        $('.masthead').fadeIn();
                        $(".masthead").css("background-color", "black");
                    } else if($(this).scrollTop() === 0) {
                        $('.masthead').fadeIn();
                        $(".masthead").css("background-color", "inherit");
                    } else {
                        $('.masthead').fadeOut();
                    }
                });
            });
        });
    }(jQuery));
</script>

Answer 1

我认为问题出在您正在添加的功能的结束标记中。

试试这样：

(function ($){
    $('#start').click(function(){
    $('.lead').hide();
  });
}(jQuery));
// my original function that stopped working after i added new one
(function ($) {

  $(document).ready(function(){

  $(".masthead").css("background-color","inherit");
  // fade in .navbar
  $(function () {
    $(window).scroll(function () {
            // set distance user needs to scroll before we fadeIn navbar
      if ($(this).scrollTop() > 600) {
        $('.masthead').fadeIn();
        $(".masthead").css("background-color","black");
      } else if($(this).scrollTop() === 0){
                $('.masthead').fadeIn();
                  $(".masthead").css("background-color","inherit");

      } else {
        $('.masthead').fadeOut();
      }
    });
  });
}); 
  }(jQuery));

Answer 2

修改：请注意，您在第一个函数$('.lead').hide());中有一个额外的右括号。

您可以使用以下内容。两个功能可以组合成一个块。您可以直接使用$(document).ready()。如果$使用jQuery.noConflict();

的名称冲突出现问题

<script>
    $(document).ready(function() {
        $(".masthead").css("background-color", "inherit");
        // fade in .navbar
        $('#start').click(function() {
            $('.lead').hide();
        });
        $(window).scroll(function() {
            // set distance user needs to scroll before we fadeIn navbar
            if ($(this).scrollTop() > 600) {
                $('.masthead').fadeIn();
                $(".masthead").css("background-color", "black");
            } else if ($(this).scrollTop() === 0) {
                $('.masthead').fadeIn();
                $(".masthead").css("background-color", "inherit");
            } else {
                $('.masthead').fadeOut();
            }
        });
    });
</script>

Answer 3

至少，关闭括号是错误的。 $（ '铅'）隐藏（））。提示：请先检查开发者控制台。玩得开心。

如何在jQuery中使用多个函数？

3 个答案: