在尝试制作该表单时，它可以与该 jquery 代码一起正常工作
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form SCCI</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.label_better.js"></script>
<script>
$(document).ready( function() {
$(".label_better").label_better({
easing: "bounce"
});
});
</script>
<style>
html {
height: 100%;
}
body {
background: #272D30;
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 100%;
}
.bl_form {
margin-bottom: 150px;
margin-left: 0;
margin-right: 0;
margin-top: 150px;
}
.bl_form input {
padding-top: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
border: none;
color: white;
border-radius: 25px;
font-size: 16px;
outline: none;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
background-color: rgba(255,255,255,0.1);
}
.lb_label {
font-weight: bold;
color: #FFF;
}
.lb_label.active {
color: #9F9;
}
</style>
<link rel="stylesheet" type="text/css" href="css/calendar.css" media="screen" />
</head>
<body>
<form action="/" class="long">
<fieldset>
<label for="date1">Date</label>
<input id="date1" name="date1" type="text" />
</fieldset>
</form>
<div class="wrapper">
<div class="main">
<div class="header">
<div class="btns">
</div>
</div>
<div class="page-container">
<form class="bl_form">
<br> <input type="text" value="" class="label_better" data-new-placeholder="Username" placeholder="Username" ></br>
<br> <input type="email" value="" class="label_better" data-new-placeholder="Email Address" placeholder="Email Address"></br>
<br> <input type="password" value="" class="label_better" data-new-placeholder="Password" placeholder="Password"></br>
<br> <input type="password" value="" class="label_better" data-new-placeholder="Confirm Password" placeholder="Confirm Password"></br>
</form>
</div>
</div>
</div>
</body>
</html>
但是在尝试使用 jquery 添加日期选择器时，代码发生冲突并且 2 个 jquery 代码不能一起工作，这里是日期选择器代码:
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/calendar.rc4.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function() {
myCal1 = new Calendar({ date1: 'd/m/Y' }, { direction: 1, tweak: {x: 6, y: 0} });
myCal2 = new Calendar({ date2: 'd/m/Y' }, { classes: ['dashboard'], direction: 1, tweak: {x: 3, y: -3} });
myCal3 = new Calendar({ date3: 'd/m/Y' }, { classes: ['i-heart-ny'], direction: 1, tweak: {x: 3, y: 0} });
});
//]]>
但如果我删除第一个代码，日期选择器工作正常，但两者相互冲突，无法协同工作
最佳答案
正如 Charlietfl 在评论中指出的那样，Mootools 和 jQuery 存在冲突。见下文 jQuery and MooTools Conflict
关于javascript - jquery代码重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26416038/