gpt4 book ai didi

javascript - 在另一个函数中重新加载 jQuery 函数

转载 作者:行者123 更新时间:2023-12-02 19:03:31 24 4
gpt4 key购买 nike

这是一个棘手的问题,我什至不知道如何表达这个标题。

所以我有一点混合,我有一个名为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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com