Question

有没有人对jquery.qrcode如何使用简单的slick slider进行任何输入？

我目前有一个滑块设置如下，以循环浏览另一张幻灯片中定义的Feed中的项目数：

显示Feed标题和摘要的主幻灯片我有一个rel属性，其中包含我想用于QR码的链接：

<!--Main Body-->
    <div class="sliderSidebar">
        <cfif isDefined("variables.feedData.maxItems") and variables.feedData.maxItems>
        <cfif variables.feedData.type neq "atom">
            <cfloop from="1" to="#variables.feedData.maxItems#" index="i">
                <div class="slide" rel="#variables.feedData.itemArray[i].link.xmlText#">
                    <cfset QR = "rel">  
                    <h3>#variables.feedData.itemArray[i].title.xmlText#</h3>
                    <p>#variables.feedData.itemArray[i].description.xmlText#</p>
                </div>
            </cfloop>
        <cfelse>
            <cfloop from="1" to="#variables.feedData.maxItems#" index="i">
                <div class="slide" rel="#variables.feedData.itemArray[i].link.xmlText#">
                    <cfset QR = "rel">  
                    <h3>#variables.feedData.itemArray[i].title.xmlText#</h3>
                    <p>#variables.feedData.itemArray[i].summary.xmlText#</p>
                </div>
            </cfloop>
        </cfif>
        </cfif>

QR码滑块，将与主滑块一起循环

        <div class="qrSlider">      
        <cfif isDefined("variables.feedData.maxItems") and variables.feedData.maxItems>
            <cfif variables.feedData.type neq "atom">
                <cfloop from="1" to="#variables.feedData.maxItems#" index="i">
                    <div id="qrBox" class="qrCode"></div>
                </cfloop>
            <cfelse>
                <cfloop from="1" to="#variables.feedData.maxItems#" index="i">
                    <div id="qrBox" class="qrCode"></div>
                </cfloop>
            </cfif>
        </cfif>
    </div>

我的javascript设置为：

        <cfif isDefined("variables.feedData.maxItems") and variables.feedData.maxItems>
        <cfif variables.feedData.type neq "atom">
            <cfloop from="1" to="#variables.feedData.maxItems#" index="i">
                <script>
                    $(document).ready(function(){
                                jQuery('.qrCode').qrcode({
                                text    : "#variables.feedData.itemArray[i].link.xmlText#",
                                width   : "115",
                                height  : "110"
                            }); 
                    });
                </script>
            </cfloop>
        <cfelse>
            <cfloop from="1" to="#variables.feedData.maxItems#" index="i">
                <script>
                    $(document).ready(function(){
                        jQuery('.qrCode').qrcode({
                                text    : "#variables.feedData.itemArray[i].link.xmlText#",
                                width   : "115",
                                height  : "110"
                            }); 
                    });
                </script>
            </cfloop>
        </cfif>
    </cfif>

我遇到的问题是每个RSS Feed条目中的所有QR码都放在一张幻灯片中并循环到下一张幻灯片。到达下一张幻灯片时，显示的QR码始终是第一个代码。任何人对如何将一个QR码成功放入每张幻灯片有任何想法？

Answer 1

首先，您的每个QR <div>都具有相同的id。

其次，您的主要问题（实际上与第一个问题相关）是这一行： jQuery('.qrCode').qrcode({...})

您正在做的是为QR <div>的所有创建相同的QRCode！在循环中，您应该通过id来指定唯一容器。例如，假设您将索引号附加到每个容器的id属性，您可以按如下方式引用每个容器：

<cfoutput>
<cfloop from="1" to="#variables.feedDAta.maxItems#" index="i">
   $('##qrBox#i#).qrcode({...});
</cfloop>
</cfoutput>

最后，你的jQuery代码没有高效输出。例如，对于每个脚本，您不需要$(document).ready()次调用...我会在一次调用中将它们包装起来，并在那里执行<cfloop>。

希望这是有道理的。

使用光滑的滑块集成动态jquery.qrcode RSS提要

1 个答案: