我的jQuery插件与我的JavaScript文件冲突 - 我该如何解决这个问题？ [英] My jQuery plugin is conflicting with my JavaScript file- how do I solve this?
问题描述
你好 - 我的jQuery导航插件与其他三个jQuery效果冲突 - 三个按钮调整字体大小和fadeIn和fadeOut效果（图片和问候语）。我已经尝试过$ .noConflict（）;没有运气以下是该页面的链接： http://bit.ly/1cr93gD [ ^ ]
以下是我的主页上的代码：
< doctype mode =hold>< html lang =en>
< head>
< meta charset = utf-8>
< title>项目< / title>
< link href ='http：//字体.googleapis.com / css？family = Geostar'rel ='stylesheet'type ='text / css'>
< link href =css / base2.css =stylesheet />
< link rel =stylesheethref =css / lavalamp.css>
< / head>
< body>
< div id =wrapper>
< h1> ;网站标题< / h1>
< ul id =menuclass =lavaLampWithImage>
< li class =current>< a href =about.html>关于< / a>< / li>
< li>< a href =gallery.html >图库< / a>< / li>
< li>< a href =resources.html>资源< / a>< / li>
< li>< a href =contact.html>联系< / a>< / li>
< / ul>
< div class =minus> - < / div>
< div class =plus> +< / div>
< div class =reset> reset< / div>
< div id =headshot>
< img src =http://ctec.clark.edu/~j.aragon2/ctec126/project%20folder/ img / cupcake.jpgalt =headshotwidth =150height =150>
< / div>
< div id =问候语>
< h2>您好......< / h2>
< / div>
< p>冰淇淋果冻水果蛋糕甜卷提拉米苏果冻豆蛋糕。蛋糕
果冻糖果馅饼巧克力halvah提拉米苏。棉花糖太妃糖巧克力棒
巧克力。巧克力棒打顶小杏仁饼蛋糕小杏仁饼布丁tootsie卷
蛋挞粉。甜粉末结冰胡萝卜蛋糕。糕点姜饼糖果羊角面包
糕点果冻-o柠檬滴酸挞胡萝卜蛋糕。 Bonbon sesame扣上饼干甜点薄饼..< / p>
< / div>
< script src =js / final_project.js>& lt; / script>
< script src = js / jquery-1.2.3.min.js>& lt; / script>
< script src =js / jquery.lavalamp.jstype =text / javascript >& lt; / script>
< script type =text / javascriptsrc =js / jquery.easing.min.js>& lt; / script>
< script type =text / javascript>
$（'document'）。ready（function（）{< br $>
$（函数（）{
$（＃menu）。lavaLamp（{
fx： 退出，
速度：700，
点击：function（event，menuItem）{
返回true;
}
}）;
}）;
}）;
< / script>
< / body>
< / html>
以下是来自final_project.js文件的三种效果代码：
$（document）.ready（function（）{
// - 图片测试
$（'＃headshot'）。css（'visibility'，'visible'）。hide（）。fadeIn（5000）;
$（'＃greetinging'）。css（'visibility'， 'visible'）。hide（）。toggle（9000）;
var defaultH1 = parseInt（$（'h1'）。css（'font-size'） ）;
var defaultP = parseInt（$（'p'）。css（'font-size'））;
var count = 0;
var elements = ['p'，'h1'];
$（'。minus'）。click（function（）{
if（count> = -1）{
$（elements）.each（function（key，val）{
$（val）.css （'font-size'，parseInt（$（val）.css（'font-size'）） - 2）;
}）;
count--;
};
}）;
$（'。plus'）。click（function（）{
if（count< = 1）{
$（elements）.each（function（key，val）{
$（val）.css（'font- size'，parseInt（$（val）.css（'font-size'））+ 2）;
}）;
count ++;
};
}）;
$（'。reset'）。click（function（）{
$（'h1'）。css（'font-size'，defaultH1）;
$（'p'）。css（'font-size'，defaultP）;
count = 0;
}）;
Hello- My jQuery navigation plugin is conflicting with three other jQuery effects- three buttons that adjust the font size and a fadeIn and fadeOut effect (picture and greeting). I have already tried $.noConflict(); and no luck. Here is a link to the page: http://bit.ly/1cr93gD[^]
Here is the code from my main page:
<doctype mode="hold"><html lang="en">
<head>
<meta charset="utf-8">
<title>Project</title>
<link href='http://fonts.googleapis.com/css?family=Geostar' rel='stylesheet' type='text/css'>
<link href="css/base2.css" rel="stylesheet" />
<link rel="stylesheet" href="css/lavalamp.css">
</head>
<body>
<div id="wrapper">
<h1>site title</h1>
<ul id="menu" class="lavaLampWithImage">
<li class="current"><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="minus">-</div>
<div class="plus">+</div>
<div class="reset">reset</div>
<div id="headshot">
<img src="http://ctec.clark.edu/~j.aragon2/ctec126/project%20folder/img/cupcake.jpg" alt="headshot" width="150" height="150">
</div>
<div id="greeting">
<h2>Hi there...</h2>
</div>
<p>Ice cream jelly fruitcake sweet roll tiramisu jelly beans cupcake. Cupcake
jelly bonbon pie chocolate halvah tiramisu. Marshmallow toffee chocolate bar
chocolate. Chocolate bar topping marzipan cake marzipan pudding tootsie roll
tart powder. Sweet powder icing carrot cake. Pastry gingerbread bonbon croissant
pastry jelly-o lemon drops tart carrot cake. Bonbon sesame snaps biscuit dessert wafer..</p>
</div>
<script src="js/final_project.js"></script>
<script src="js/jquery-1.2.3.min.js"></script>
<script src="js/jquery.lavalamp.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$(function() {
$("#menu").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
});
</script>
</body>
</html>
Here is the code from the final_project.js file for the three effects:
$(document).ready(function() {
//-- picture test
$('#headshot').css('visibility','visible').hide().fadeIn(5000);
$('#greeting').css('visibility','visible').hide().toggle(9000);
var defaultH1 = parseInt($('h1').css('font-size'));
var defaultP = parseInt($('p').css('font-size'));
var count = 0;
var elements = ['p', 'h1'];
$('.minus').click(function(){
if ( count >= -1 ) {
$(elements).each(function(key, val) {
$(val).css('font-size', parseInt($(val).css('font-size'))-2);
});
count--;
};
});
$('.plus').click(function(){
if ( count <= 1 ) {
$(elements).each(function(key, val) {
$(val).css('font-size', parseInt($(val).css('font-size'))+2);
});
count++;
};
});
$('.reset').click(function(){
$('h1').css('font-size', defaultH1);
$('p').css('font-size', defaultP);
count = 0;
});
推荐答案
.noConflict（）;没有运气以下是该页面的链接： http://bit.ly/1cr93gD [ ^ ]
以下是我的主页上的代码：
< doctype mode =hold>< html lang =en>
< head>
< meta charset = utf-8>
< title>项目< / title>
< link href ='http：//字体.googleapis.com / css？family = Geostar'rel ='stylesheet'type ='text / css'>
< link href =css / base2.css =stylesheet />
< link rel =stylesheethref =css / lavalamp.css>
< / head>
< body>
< div id =wrapper>
< h1> ;网站标题< / h1>
< ul id =menuclass =lavaLampWithImage>
< li class =current>< a href =about.html>关于< / a>< / li>
< li>< a href =gallery.html >图库< / a>< / li>
< li>< a href =resources.html>资源< / a>< / li>
< li>< a href =contact.html>联系< / a>< / li>
< / ul>
< div class =minus> - < / div>
< div class =plus> +< / div>
< div class =reset> reset< / div>
< div id =headshot>
< img src =http://ctec.clark.edu/~j.aragon2/ctec126/project%20folder/ img / cupcake.jpgalt =headshotwidth =150height =150>
< / div>
< div id =问候语>
< h2>您好......< / h2>
< / div>
< p>冰淇淋果冻水果蛋糕甜卷提拉米苏果冻豆蛋糕。蛋糕
果冻糖果馅饼巧克力halvah提拉米苏。棉花糖太妃糖巧克力棒
巧克力。巧克力棒打顶小杏仁饼蛋糕小杏仁饼布丁tootsie卷
蛋挞粉。甜粉末结冰胡萝卜蛋糕。糕点姜饼糖果羊角面包
糕点果冻-o柠檬滴酸挞胡萝卜蛋糕。 Bonbon sesame扣上饼干甜点薄饼..< / p>
< / div>
< script src =js / final_project.js>& lt; / script>
< script src = js / jquery-1.2.3.min.js>& lt; / script>
< script src =js / jquery.lavalamp.jstype =text / javascript >& lt; / script>
< script type =text / javascriptsrc =js / jquery.easing.min.js>& lt; / script>
< script type =text / javascript>
.noConflict(); and no luck. Here is a link to the page: http://bit.ly/1cr93gD[^]
Here is the code from my main page:
<doctype mode="hold"><html lang="en">
<head>
<meta charset="utf-8">
<title>Project</title>
<link href='http://fonts.googleapis.com/css?family=Geostar' rel='stylesheet' type='text/css'>
<link href="css/base2.css" rel="stylesheet" />
<link rel="stylesheet" href="css/lavalamp.css">
</head>
<body>
<div id="wrapper">
<h1>site title</h1>
<ul id="menu" class="lavaLampWithImage">
<li class="current"><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="minus">-</div>
<div class="plus">+</div>
<div class="reset">reset</div>
<div id="headshot">
<img src="http://ctec.clark.edu/~j.aragon2/ctec126/project%20folder/img/cupcake.jpg" alt="headshot" width="150" height="150">
</div>
<div id="greeting">
<h2>Hi there...</h2>
</div>
<p>Ice cream jelly fruitcake sweet roll tiramisu jelly beans cupcake. Cupcake
jelly bonbon pie chocolate halvah tiramisu. Marshmallow toffee chocolate bar
chocolate. Chocolate bar topping marzipan cake marzipan pudding tootsie roll
tart powder. Sweet powder icing carrot cake. Pastry gingerbread bonbon croissant
pastry jelly-o lemon drops tart carrot cake. Bonbon sesame snaps biscuit dessert wafer..</p>
</div>
<script src="js/final_project.js"></script>
<script src="js/jquery-1.2.3.min.js"></script>
<script src="js/jquery.lavalamp.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript">
（'document'）。ready （function（）{
('document').ready(function(){
（function（）{
(function() {
这篇关于我的jQuery插件与我的JavaScript文件冲突 - 我该如何解决这个问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
