脚本适用于html，但不适用于javascript文件

Final Update The problem got solved. Thank you all. Prepros compile my js file into main-dist. the new code was in there instead of my main.js. Thank you for all who help me.

最终更新问题得到解决。谢谢你们。 Prepros将我的js文件编译成main-dist。新代码在那里而不是我的main.js.谢谢所有帮助我的人。

update Able to reproduce the nonworking code in jsBin

update能够在jsBin中重现非工作代码

I'm wondering why the function is not working in my js file after my jquery file is called but the script work in my HTML file.
I want the function to be in my js file so it isn't in each one of my HTML file.

我想知道为什么在我的jquery文件被调用之后函数在我的js文件中不起作用但脚本在我的HTML文件中工作。我希望函数在我的js文件中，所以它不在我的每个HTML文件中。

Example 1 in html on jsFiddle

jsFiddle上的html示例1

Example 2 in html

html中的示例2

var navBar = function() {

    var pull = $('#pull');
    var menu = $('nav ul');

    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
    }
    }); 
};

$(document).ready(navBar);

Really Long snippet. The navbar code work in snippet as well but it doesn't work when i load in my browser

真的很长的片段。导航条代码也可以在代码片段中工作，但是当我在浏览器中加载时它不起作用

//time on front page
function displayTime () {
	var elt = document.getElementById("clock");
	var now = new Date();
	elt.innerHTML = now.toLocaleTimeString();
	setTimeout (displayTime, 1000);
};
displayTime();
/*
	function menu(){
		$('.tMenu').click(function(){
			$('nav ul').slideToggle();
		})
	}
	menu(); */

	var navBar = function() {
		
	    var pull = $('#pull');
	    var menu = $('nav ul');
	 
	    $(pull).on('click', function(e) {
	        e.preventDefault();
	        menu.slideToggle();
	    });

	    $(window).resize(function(){
		    var w = $(window).width();
		    if(w > 320 && menu.is(':hidden')) {
		        menu.removeAttr('style');
	    }
		}); 
	};

	$(document).ready(navBar);


//slider main page
var main = function(){


	$('.arrow-next').click(function(){
		var currentSlide = $('.active-slide');
		var nextSlide = currentSlide.next();

		var currentDot = $('.active-dot');
		var nextDot = currentDot.next();

		if (nextSlide.length === 0) {
			nextSlide = $('.slide').first();
			nextDot = $('.dot').first();
		}

		currentSlide.fadeOut(500).removeClass('active-slide');
		nextSlide.fadeIn(500).addClass('active-slide');

		currentDot.removeClass('active-dot');
		nextDot.addClass('active-dot');
	});

	$('.arrow-prev').click(function(){
		var currentSlide = $('.active-slide');
		var prevSlide = currentSlide.prev();

		var currentDot = $('.active-dot');
		var prevDot = currentDot.prev();

		if(prevSlide.length === 0) {
     	 	prevSlide = $('.slide').last();
     		prevDot = $('.dot').last();
     	}
     	currentSlide.fadeOut(500).removeClass('active-slide');
     	prevSlide.fadeIn(500).addClass('active-slide');

     	currentDot.removeClass('active-dot');
     	prevDot.addClass('active-dot');
	});


	$('.dot').click(function(){
		var index = $(this).index(); // get the index or position of the current element that has the class .dot
		$('.slide').fadeOut(500); // to hide all elements with class .slide
		$('.dot').removeClass('active-dot');
		$('.slide').removeClass('active-slide').addClass('active');
		$('#slide' + (index+1)).fadeIn(500); 
		$('#slide' + (index+1)).removeClass('active').addClass('active-slide');
		$(this).addClass('active-dot');
		});
	
};

$(document).ready(main);

.clearfix:before,
.clearfix:after {
  content: ' ';
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

nav {
  background: #17181D;
  border-bottom: 1px solid #0A0A0A;
  font-family: 'PT Sans', Arial, sans-serif;
  font-weight: bold;
  position: relative;
  height: 40px;
  width: 100%;
}

nav ul {
  height: 40px;
  width: 600px;
  margin: 0 auto;
  padding: 0;
}

nav li {
  display: inline;
  float: left;
}

nav a {
  color: #DED6D6;
  display: inline-block;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0px #30365E;
  width: 150px;
}

nav li a {
  border-right: 1px solid #515676;
  border-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

nav li:last-child a {
  border-right: 0;
}

nav a:hover, nav a:active {
  background-color: #2575C6;
}

nav a#pull {
  display: none;
}

@media screen and (max-width: 600px) {
  nav {
    height: auto;
  }
  nav ul {
    width: 100%;
    display: block;
    height: auto;
  }
  nav li {
    width: 50%;
    float: left;
    position: relative;
  }
  nav li a {
    border-bottom: 1px solid #C0C0C0;
    border-right: 1px solid #C0C0C0;
  }
  nav a {
    text-align: center;
    width: 100%;
    text-indent: 25px;
  }
}

@media only screen and (max-width: 480px) {
  nav {
    border-bottom: 0;
  }
  nav ul {
    display: none;
    height: auto;
  }
  nav a#pull {
    display: block;
    background-color: #17181D;
    width: 100%;
    position: relative;
    text-decoration: none;
  }
  nav a#pull:after {
    border-top: .5em double white;
    border-bottom: .145em solid white;
    content: ' ';
    display: inline-block;
    height: 0.85em;
    width: 1em;
    position: absolute;
    right: 15px;
    top: 13px;
  }
}

@media only screen and (max-width: 320px) {
  nav li {
    display: block;
    float: none;
    width: 100%;
  }
  nav li a {
    border-bottom: 1px solid white;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
		<div>
			<h1 class='vb'></h1>
			<div class='time'></div>
			<div id='clock'></div>
			<nav class='clearfix'>
				<ul class='clearfix'>
					<li>
						<a href="#">Home</a>
					</li>
					<li>
						<a href="bio.html">Bio</a>
					</li>
					<li>
						<a href="#">Hobbies</a>
					</li>
					<li>
						<a href="resume.html">Resume</a>
					</li>
				</ul>
				<a href='#' id='pull'>Menu</a>
			</nav>
		</div>
	</header>
<div class='slider container'>
	<div class='slide active-slide slide-bg' id='slide1'>
		<div class='container'>
			<div class='row'>
					<div class='slide-copy-1 col-xs-12'>
						<h1>Surrounding</h1>
						<p class='fun'>Our lives are so hectic with everyday work, business and errands that we tend to never stop and take in our surrounding.  When was the last time you stop and enjoy a nice beatiful sunset?</p>
					</div>
			</div>
		</div>
	</div>
	<div class='slide' id='slide2'>
		<div class='container'>
			<div class='row'>
				<div class='slide-copy col-xs-5'>
				<h1>Get Moving And Motivated!</h1>
				<p>In a world where digital devices is so prominent, we get lost in them.  Our strength are that we are very adaptable but it can also be our greatest weakness. </p>
				</div>
					<div class='slide-image col-md-8'>
						<!--
						<ul class='imageList'>
							<li><a href='#'><img src="images/jog.jpg" /></a></li>
							<li><a href='#'><img src="images/health.png" /></a></li>
							<li><a href='#'><img src="images/motivated.jpg" /></a></li>
							<li><a href='#'><img src='images/possible.jpg' /></a></li>
						</ul> -->
					</div>
			</div>
		</div>
	</div>
	<div class='slide' id='slide3'>
		<div class='container'>
			<div class='row'>
				<div class='slide-copy col-xs-5'>
				<h1>Food Delight</h1>
				<p>We have all been there before!! Food is the best type of comfort.  Eating healthy is great but nothing can satisfied your soul more than your favorite rarities.</p>
				<!--<img src="images/sushi.jpg"/>-->
				</div>
			</div>
		</div>
	</div>
	<div class='slide' id='slide4'>
		<div class='container'>
			<div class='row'>
				<div class='slide-copy col-xs-5'>
				<h1>Videos</h1>
				<p>Movies, TV shows and online video play such a huge role in our culture.  Learning, Entertainment, Visual Satisfaction etc.</p>
				<!--<iframe class='vid' width="750" height="400" src="https://www.youtube.com/embed/sGbxmsDFVnE" frameborder="0" allowfullscreen></iframe> -->
				</div>
			</div>
		</div>
	</div>
</div>
	<div class='slider-nav'>
		<a href='#' class='arrow-prev'><img src="images/arrow-prev.png"></a>
			<ul class='slider-dot'>
				<li class='dot dot1 active-dot'>&bull;</li>
				<li class='dot dot2'>&bull;</li>
				<li class='dot dot3'>&bull;</li>
				<li class='dot dot4'>&bull;</li>
			</ul>
		<a href="#" class='arrow-next'><img src="images/arrow-next.png"></a>
	</div>

3 个解决方案

#1

Please see it's working here [1]: https://jsfiddle.net/e1aar5hz/11/

请看它在这里工作[1]：https：//jsfiddle.net/e1aar5hz/11/

$(function() {
        var pull = $('#pull');
        var menu = $('nav ul');
    menu.hide();
    pull.show()
    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
    }
    }); 
});

#2

You code works just as it should. You target a link with id="pull" to toggle the menu on and off. The problem is, on your CSS, you hide that #pull link when you add this:

您的代码可以正常工作。您使用id =“pull”定位链接以打开和关闭菜单。问题是，在你的CSS上，你添加这个时隐藏了#pull链接：

a#pull {
    display: none;
}

So the button we need to click to toggle the menu is not there.

因此，我们需要单击以切换菜单的按钮不在那里。

Just remove that CSS and you will see the "Menu" button and that the script is working fine.

只需删除该CSS，您将看到“菜单”按钮，并且脚本工作正常。

If this is not the problem, please elaborate on what you are expecting to happen with the code you have here.

如果这不是问题，请详细说明您在此处使用的代码所期望的内容。

#3

i recreated your code and is working just fine the only error i corrected was on displayTime function

我重新创建了你的代码，并且工作正常，我纠正的唯一错误是displayTime函数

function displayTime () {
   var now = new Date();    
   var elt = $("#clock").text(now.toLocaleTimeString());        
   setTimeout (displayTime, 1000);
};

here is a demo http://plnkr.co/edit/6qNQMIQT4EhtqrlzUtGb?p=preview

这是一个演示http://plnkr.co/edit/6qNQMIQT4EhtqrlzUtGb?p=preview

#1