当我在jQuery中包含jQuery滑块/横幅时，不工作
当我在jQuery中包含jQuery滑块/横幅时，不工作
提问于 2018-03-14 18:45:53
我的jQuery datepicker代码运行良好。但是当我在同一页上包含一个jQuery滑块/横幅时，日期选择器就不能工作了。我认为脚本标签可能会与其他标签冲突。
Scripts under head tag:
//for datepicker
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="script.js"></script>
//for slider/banner
<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
html:
Search By Date <input type="text" id="datepicker" name="date">
<input type="submit" name="searchbydate" value="Search">
<script type="text/javascript">
$(window).on('load', function() {
$('#slider').nivoSlider();
});
</script>
script.js file
$(document).ready(function(){
$("#datepicker").datepicker({dateFormat: 'dd/mm/yy'});
});滑块的PHP代码
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<?php
include("dbConnect.php");
$query="select * from event_table where enable_disable='Enable'";
$result=mysqli_query($conn,$query);
if(mysqli_num_rows($result)>0)
{
while($row=mysqli_fetch_array($result))
{
//echo "<img src='images/".$row['image']."' title='".$row['description']."' height='400'>";
?>
<a href="event_details.php?eid=<?php echo $row['event_id']; ?>"><img src="images/<?php echo $row['image'] ?>" title="<?php echo $row['event_name'] ?>" height="450"></a>
<?php
}
}
else
{
echo "No Events";
}
mysqli_close($conn);
?>
</div>
</div>我的滑块在开始时显示两张额外的空幻灯片，在第二张幻灯片之后，它工作得很好。如何删除多余的空幻灯片？
id="slider“的代码
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Connection</title>
</head>
<body>
</body>
</html> <a href="event_details.php?eid=9"><img src="images/foot.jpg" title="Indian Super League 4" height="450"></a>
<a href="event_details.php?eid=10"><img src="images/volleyball.jpg" title="Pro Volleyball League" height="450"></a>
<a href="event_details.php?eid=11"><img src="images/nemo.jpg" title="Nemo Play" height="450"></a>
<a href="event_details.php?eid=12"><img src="images/walle.jpg" title="Robot Fight" height="450"></a>
<a href="event_details.php?eid=13"><img src="images/badminton.jpg" title="Premier Badminton League" height="450"></a>
<a href="event_details.php?eid=18"><img src="images/foot2.jpg" title="English Premier League" height="450"></a>
</div>
</div>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-03-14 18:56:04
删除其中一个jQuerys -例如<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
我还需要修复选择器Jquery date picker z-index issue的zindex。
并对所有用户使用CDN：
$(window).on('load', function() {
$('#slider').nivoSlider();
});
$(document).ready(function() {
$("#datepicker").datepicker({
dateFormat: 'dd/mm/yy'
});
});<!-- for datepicker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- for slider/banner -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/nivo-slider.min.css" type="text/css" media="screen" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/jquery.nivo.slider.min.js"></script>
Search By Date <input type="text" id="datepicker" name="date" style="position: relative; z-index: 100000;" />
<input type="submit" name="searchbydate" value="Search" />
<div id="slider" class="nivoSlider"> <img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/toystory.jpg" data-thumb="https://www.jqueryscript.net/demo/nivo-slider/demo/images/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/up.jpg" data-thumb="https://www.jqueryscript.net/demo/nivo-slider/demo/images/up.jpg" alt="" title="This is an example of a caption" /></a> <img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/walle.jpg"
data-thumb="https://www.jqueryscript.net/demo/nivo-slider/demo/images/walle.jpg" alt="" data-transition="slideInLeft" /> <img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/nemo.jpg" data-thumb="demo/images/nemo.jpg" alt="" title="#htmlcaption"
/> </div>
<div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
使用html作为滑块
$(window).on('load', function() {
$('#slider').nivoSlider();
});
$(document).ready(function() {
$("#datepicker").datepicker({
dateFormat: 'dd/mm/yy'
});
});<!-- for datepicker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- for slider/banner -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/nivo-slider.min.css" type="text/css" media="screen" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/jquery.nivo.slider.min.js"></script>
Search By Date <input type="text" id="datepicker" name="date" style="position: relative; z-index: 100000;" />
<input type="submit" name="searchbydate" value="Search" />
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<a href="event_details.php?eid=9"><img src="https://www.hindustantimes.com/rf/image_size_960x540/HT/p2/2017/11/26/Pictures/hero-isl-m9-atk-v-pune_cb4d0a0a-d2a8-11e7-a40e-766ee48c25bf.jpg" title="Indian Super League 4" height="450"></a>
<a href="event_details.php?eid=10"><img src="http://images.all-free-download.com/images/graphiclarge/arrest_volleyball_picture_168170.jpg" title="Pro Volleyball League" height="450"></a>
<a href="event_details.php?eid=11"><img src="https://static1.squarespace.com/static/51cdafc4e4b09eb676a64e68/57aa036e20099eb9c945bcae/57aa03705016e1b85aa5821b/1470759793960/nemo11.jpg" title="Nemo Play" height="450"></a>
<a href="event_details.php?eid=12"><img src="https://vignette.wikia.nocookie.net/disney/images/2/2b/Wall-E.png/revision/latest?cb=20151002192237" title="Robot Fight" height="450"></a>
<a href="event_details.php?eid=13"><img src="https://cdn.pixabay.com/photo/2016/05/31/23/21/badminton-1428047_960_720.jpg" title="Premier Badminton League" height="450"></a>
<a href="event_details.php?eid=18"><img src="http://www.cyprusupdates.com/wp-content/uploads/2014/05/FreeGreatPicture.com-19724-football.jpg" title="English Premier League" height="450"></a>
</div>
</div>
Stack Overflow用户
发布于 2018-03-14 18:52:03
我认为这是因为您正在使用两个jquery库，而它们可能会在尝试删除其中一个库时发生冲突
我认为你应该删除：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49275669
复制相关文章
相似问题
腾讯云开发者
