Интегрируйте динамический jquery.qrcode RSS-канал с slick slider

Question

Есть ли у кого-нибудь какие-либо данные о том, как я могу получить jquery.qrcode, работающий с простым slick slider?

У меня есть ползунок настроить в настоящее время следующим образом перебрать количество элементов в фиде, определенных в другой слайд-шоу:

Главная слайд-шоу, где отображаются заголовок подачи и резюме у меня есть атрибут отн, содержащий ссылку Я хочу использовать для 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> 

И мой Явы Сценарий быть настроен как:

 <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> 

Проблема у меня в том, что все QR коды от каждой записи RSS-каналов помещаются в один слайд и зацикливание на следующий слайд. Когда следующий слайд достигнут, показанный QR-код всегда является первым кодом. У кого-нибудь есть идеи о том, как я могу разместить один QR-код успешно в каждом слайде?

Answer 1

Прежде всего, у каждого из ваших QR-телефонов <div> таких же id.

Во-вторых, ваша основная проблема (связанная с первой на самом деле) эта линия: jQuery('.qrCode').qrcode({...})

Что вы делаете, создавая тот же QRCode для все из QR <div> «s! В вашем цикле вы должны, вероятно, указать уникальный контейнер по его id. Например, если вы добавить номер индекса для каждого атрибута контейнера id, можно ссылаться на каждый контейнер следующим образом:

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

Наконец, ваш код JQuery не выводится все, что эффективно. Например, вам не нужны $(document).ready() вызовы для каждого скрипта ... Я бы обернул их одним вызовом и сделаю мой <cfloop> внутри.

Надеюсь, что имеет смысл.