在另一个函数中重新加载jQuery函数
这是一个棘手的问题，我甚至不知道如何用词来描述这个标题。
我有一个名为slideonlyone的jQuery函数，它可以切换div，在div中我有一个名为royalSlider(内容滑块)的jQuery插件。
发生的情况是，当我第一次加载页面时，默认情况下div没有切换，royalSlider插件工作正常。当我使用royalSlider插件将页面切换到另一个div时，它无法加载该插件。
我的页面头部看起来像这样：
<head>
<link rel="stylesheet" href="/css/system.css" type="text/css">
<link rel="stylesheet" href="/css/royalslider.css" type="text/css">
<link rel="stylesheet" href="/css/default/rs-default-inverted.css" type="text/css">
<script src="/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/js/jquery.royalslider.js" type="text/javascript"></script>
<script src="/js/systems_jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function slideonlyone(thechosenone) {
$('.systems_detail').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(200);
}
else {
$(this).slideUp(600);
}
});
}
</script>
</head>在我加载的一个名为'systems_jquery.js‘的单独文件中调用royalSlider
jQuery(document).ready(function($) {
var rsi = $('#slider-in-laptop').royalSlider({
autoHeight: false,
arrowsNav: false,
fadeinLoadedSlide: false,
controlNavigationSpacing: 0,
controlNavigation: 'bullets',
imageScaleMode: 'fill',
imageAlignCenter: true,
loop: false,
loopRewind: false,
numImagesToPreload: 6,
keyboardNavEnabled: true,
autoScaleSlider: true,
autoScaleSliderWidth: 486,
autoScaleSliderHeight: 315
}).data('royalSlider');
$('#slider-next').click(function() {
rsi.next();
});
$('#slider-prev').click(function() {
rsi.prev();
});
});这个html看起来像这样，我把它作为一种简要的总结--当他们点击div时，就会加载切换产品详细信息的slideonlyone函数
<a href="javascript:slideonlyone('beagle_box');">
<div class="system_box">
<h2>BEE management systems</h2>
<p>________________</p>
</div>
</a>这是产品详细信息div。
<div class="systems_detail" id="sms_box">
<div class="laptopBg">
<img src="/images/laptop.png" class="imgBg" width="707" height="400">
<div id="slider-in-laptop" class="royalSlider rsDefaultInv">
<img src="/images/1.jpg">
<img src="/images/2.jpg" data-rsvideo="https://vimeo.com/45778774">
<img src="/images/3.jpg">
<img src="/images/4.jpg">
</div>
</div>
</div>正如您所看到的，部分细节是royalSlider，它显示了产品的屏幕截图。但由于它只是刚刚出现，图像没有加载到滑块中，图像显示在彼此下面，就好像插件坏了一样，但当我检查元素并转到控制台时，我可以看到它没有坏掉。因此，我怀疑每当我切换royalSlider以便再次找到ID时，它都需要重新加载。
当我从我的royalSlider函数切换/滑动一些内容时，是否可以重新加载slidonlyone函数？
注意:如果我切换div并且滑块丢弃了它的内容，如果我重新加载页面，它会再次拾取它们。所以，一旦我切换了royalSlider --或者一旦我切换了页面，它肯定是需要重新加载的页面。
回答 1
Stack Overflow用户
发布于 2013-01-28 21:47:29
好吧，如果你想再次运行'royalSlider‘，而不是仅仅把所有的东西都包装在一个函数中。然后在你认为需要重新加载的时候运行它('documentReady‘或'click'，等等)：
royalSliderReload = function() {
var rsi = $('#slider-in-laptop').royalSlider({
autoHeight: false,
arrowsNav: false,
fadeinLoadedSlide: false,
controlNavigationSpacing: 0,
controlNavigation: 'bullets',
imageScaleMode: 'fill',
imageAlignCenter: true,
loop: false,
loopRewind: false,
numImagesToPreload: 6,
keyboardNavEnabled: true,
autoScaleSlider: true,
autoScaleSliderWidth: 486,
autoScaleSliderHeight: 315
}).data('royalSlider');
$('#slider-next').click(function() {
rsi.next();
});
$('#slider-prev').click(function() {
rsi.prev();
});
}
$(document).ready(function(e) {
royalSliderReload();
});
function slideonlyone(thechosenone) {
$('.systems_detail').each(function (index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(200);
royalSliderReload(); // slider will reload here
} else {
$(this).slideUp(600);
}
});
}https://stackoverflow.com/questions/14563170
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号