Question

我在一个网站上工作，我通过js从外部资源中提取数据。我想获取这些数据并将其插入滑块中的每个标题和img源。我使用的是带有标题的简单滑块，我从＆＃34; slider-with-caption.source.html＆＃34; Jssor中提供的文件。

下来的数据都是简单的字符串。我已经将控制台运行到断点，我确实收到了预期的数据。

这就是我的问题所在。我已经使用唯一ID设置了三张幻灯片中的每一张的内容（见下文）。然而，当我收集我的数据并随后尝试将其插入标签时，没有任何反应。我使用了$(id).text(data string);以及.html(data string);

我将包含以下代码，请告诉我jssor代码中是否有任何可能阻止此类操作的内容。

由于

编辑：注意到jssor似乎制作了所有标签的副本并覆盖了它们，所以我尝试$("#annone).each($(this).text(title);无济于事。

页面HTML：

<div id="announcements">
    <div id="slider1_container" class="announcements">
        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 725px; height: 345px; overflow: hidden;">
            <!-- Slide -->
            <div>
                <img id="annimgone" u="image" src="https://team.gsk.com/sites/chna-aar/SiteAssets/slide1.jpg" />
                <div u="caption" t="MCLIP|B" style="position: absolute; top: 295px; left: 0px; width: 725px; height: 50px;">
                    <div style="position: absolute; top: 0px; left: 0px; width: 725px; height: 50px;
                    background-color: Black; opacity: 0.5; filter: alpha(opacity=50);">
                    </div>
                    <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
                    color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
                        <a class="white" style="color:white;" href="#" id="annone">The Change Network</a>
                    </div>
                </div>
            </div>
            <!-- Slide -->
            <div>
                <img id="annimgtwo" u="image" src="https://team.gsk.com/sites/chna-aar/SiteAssets/slide2.jpg" />
                <div u="caption" t="MCLIP|B" style="position: absolute; top: 295px; left: 0px; width: 725px; height: 50px; ">
                    <div style="position: absolute; top: 0px; left: 0px; width: 725px; height: 50px;
                    background-color: Black; opacity: 0.5; filter: alpha(opacity=50);">
                    </div>
                    <div style="position: absolute; top: 0px; left: 0px; width: 725px; height: 50px;
                    color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
                        <a class="white" style="color:white;" href="#" id="anntwo">Express Learning</a>
                    </div>
                </div>
            </div>
            <!-- Slide -->
            <div>
                <img id="annimgthree" u="image" src="https://team.gsk.com/sites/chna-aar/SiteAssets/slide3.jpg" />
                <div u="caption" t="MCLIP|B" style="position: absolute; top: 295px; left: 0px; width: 725px; height: 50px; ">
                    <div style="position: absolute; top: 0px; left: 0px; width: 725px; height: 50px; background-color: Black; opacity: 0.5; filter: alpha(opacity=50);">
                    </div>
                    <div style="position: absolute; top: 0px; left: 0px; width: 725px; height: 50px; color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
                        <a class="white" style="color:white;" href="#" id="annthree">Opport-Tuesdays</a>
                    </div>
                </div>
            </div>
        </div>
        <a style="display: none" href="http://www.jssor.com">javascript carousel</a>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            var siteURL = '/sites/chna-aar/'

            var clientContext = new SP.ClientContext(siteURL);
            var site = clientContext.get_web();
            var list = site.get_lists().getByTitle('Announcements');

            var query = '<Query><Where><IsNotNull><FieldRef Name="Title" /></IsNotNull></Where><OrderBy><FieldRef Name="Created" Ascending="False" /></OrderBy></Query>'

            var camlQuery = new SP.CamlQuery();
            camlQuery.set_viewXml(query);

            var items = list.getItems(camlQuery);

            clientContext.load(items);

            clientContext.executeQueryAsync(function () {
                var enumerator = items.getEnumerator();

                while (enumerator.moveNext()) {
                    var item = enumerator.get_current();
                    var title = '';
                    title = item.get_item('Title');

                    $("#annone").text(title);
                    //Alternative - $("#annone").html(title);
                }
            }, function () { });
        });
    </script>
</div>

Answer 1

看起来是正确的，不确定问题是什么。

但如果在更改所有标题后初始化jssor滑块会更好。

        clientContext.executeQueryAsync(function () {
            var enumerator = items.getEnumerator();

            while (enumerator.moveNext()) {
                var item = enumerator.get_current();
                var title = '';
                title = item.get_item('Title');

                $("#annone").text(title);
                //Alternative - $("#annone").html(title);
            }

            //initialize jssor slider when you get all content ready
            var jssor_slider1 = new $JssorSlider$(...;
        }, function () { });

我可以动态更改jssor滑块上的标题吗？

1 个答案: