将动态 jquery.qrcode RSS 提要与灵活的滑块集成

Question

有人对我如何获得 jquery.qrcode working with a simple slick slider 有任何意见吗？

我目前设置了一个滑块，用于循环显示另一个幻灯片中定义的我的供稿中的项目数：

显示提要 header 和摘要的主幻灯片我有一个包含 link 的 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>

将与主滑块一起循环的二维码滑块

        <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 提要条目中的所有 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 提要与灵活的滑块集成

Integrate dynamic jquery.qrcode RSS feed with slick slider

javascript

rss

coldfusion

jquery

mura