Question

我在将一些客户端数据传递到第三方插件时遇到了一些困难。

我正在尝试使用插件选项来处理通过用户点击下面<li>创建并填充的变量。

简介：

我有一些HTML作为交互的处理程序。

<ul class="subpage-list" id="intro-subpage-list">
    <li data-slide="1">slide 1</li>
    <li data-slide="2">slide 2</li>
    <li data-slide="3">slide 3</li>
    <li data-slide="4">slide 4</li>
    <li data-slide="5">slide 5</li>
    <li data-slide="6">slide 6</li>
</ul>

当用户点击任何<li>时，我有以下代码：

$("#intro-subpage-list li").click(function() {
    var slideID = $(this).attr('data-slide');

    $("body").css('overflow','hidden');
    $("#intro-overlay").fadeIn(1000,function() {
        $("#intro-subpage").show();
    });
});

JS交互后加载的HTML如下：

<div id="intro-overlay" class="overlay">
    <div id="overlay-close">X</div>
    <div id="loading"></div>
    <section id="intro-subpage">
        <div class="ls-layer">
            <img class="ls-bg" alt="layer1-background" src="/<? echo ASSETS . IMAGES . BGS . LIGHTSLIDER; ?>intro/1.jpg">
        </div>
        <div class="ls-layer">
            <img class="ls-bg" alt="layer2-background" src="/<? echo ASSETS . IMAGES . BGS . LIGHTSLIDER; ?>intro/2.jpg">
        </div>
    </section>
</div>

加载和控制插件的代码如下：

$(".overlay section").layerSlider({
    autoStart:  false,
    imgPreload: true,
    slideDelay: '6000'
});

这个名为“firstLayer”的插件有一个选项对我来说非常合理，可以选择控制滑块加载正确的幻灯片，具体取决于点击的<li>。

我有一个名为functions.php的文件，用于处理HTML和一个名为jquery.php的文件，用于处理插件和JS。

如果我遗漏了任何重要内容，请提出要求，我将使用这些详细信息编辑此帖。

提前致谢。

丹

Answer 1

由于没有人能够帮助解决这个问题，我继续尝试解决方案，我意识到创建自己的插件;虽然耗费时间，但这是最好的选择，因为我可以根据自己的需要定制插件。

感谢所有至少看过这个问题但可能想过的人。

通过客户端用户交互控制jquery插件选项

1 个答案: