这是一个棘手的问题，我什至不知道如何表达这个标题。
所以我有一点混合，我有一个名为slideonlyone的jQuery函数，它可以切换div，并且在div内我有一个名为royalSlider(内容 slider )的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>
RoyalSlider 在我加载的一个名为“systems_jquery.js”的单独文件中调用
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 时，会加载 slideronlyone 功能，该功能会切换产品详细信息
<a href="javascript:slideonlyone('beagle_box');">
<div class="system_box">
<h2>BEE management systems</h2>
<p>________________</p>
</div>
</a>
这是产品详细信息部分。
<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>
正如您所看到的，皇家 slider 是细节的一部分，它显示了产品的屏幕截图。但由于它只是刚刚出现，图像不会加载到 slider 中，并且图像会显示在彼此下方，就好像插件已损坏一样，但是当我检查元素并转到控制台时，我可以看到它没有损坏。所以我怀疑，当我切换 div 时，royalSlider 需要重新加载，以便它再次找到 ID？？
当我从 slidonlyone 函数中切换/滑动某些内容时，是否可以重新加载 RoyalSlider 函数？
注意:如果我切换 div 并且 slider 会丢弃其内容，如果我重新加载页面，它会再次拾取它们。所以一旦我切换了div，它绝对是royalSlider需要重新加载——或者在我切换页面后重新加载页面。
最佳答案
如果您想再次运行“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);
}
});
}
关于javascript - 在另一个函数中重新加载 jQuery 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14563170/