如何迭代滑塊中每個幻燈片的jQuery函數？

摘要：這樣做的目的是顯示用戶可以點擊的3部分滑塊，並且他們可以使用每張幻燈片上的索引將該幻燈片上的卡過濾爲特定主題。過濾器工作正常，但JavaScript填充索引時存在問題：它爲所有3張卡片填充索引，並在每張幻燈片上顯示大索引。相反，每張幻燈片的索引必須是唯一的，並且只包含同一張幻燈片中的卡片的標籤。我真的想避免爲不同的幻燈片重複代碼。如何迭代滑塊中每個幻燈片的jQuery函數？

HTML

下面的HTML有3個（LI）滑動。每張幻燈片都包含一個可見索引（.hashtag-list）和一個或多個文章卡片（.item）。除第一個以外，每個（.item）都包含一個帶有一個或多個hashtag值的隱藏輸入。

<li class="trend-cards"> 
    <div class="card-items"> 
     <div class="item trendingtopiccardblock"> 
      <div class="hashtag-list"></div> 
     </div> 
     <div class="item"> 
      <input class="tags" type="hidden" value="TopicA,TopicB"/> 
     </div> 
     <div class="item"> 
      <input class="tags" type="hidden" value="TopicC"/> 
     </div> 
    </div> 
</li> 
<li class="trend-cards"> 
    <div class="card-items"> 
     <div class="item trendingtopiccardblock"> 
      <div class="hashtag-list"></div> 
     </div> 
     <div class="item"> 
      <input class="tags" type="hidden" value="TopicC, TopicD"/> 
     </div> 
     <div class="item"> 
      <input class="tags" type="hidden" value="TopicA,TopicC,TopicD"/> 
     </div> 
    </div> 
</li> 
<li class="trend-cards"> 
    <div class="card-items"> 
     <div class="item trendingtopiccardblock"> 
      <div class="hashtag-list"></div> 
     </div> 
     <div class="item"> 
      <input class="tags" type="hidden" value="TopicA, TopicD"/> 
     </div> 
     <div class="item"> 
      <input class="tags" type="hidden" value="TopicB,TopicC,TopicD"/> 
     </div> 
    </div> 
</li>

的JavaScript

以下的jQuery從.tags添加類拉動值，將它們存儲在一個陣列，刪除重複，將它們排序，然後填充HTML在回調。（忽略countryButtons和國陣，因爲這是不相關的。）

populateHashtagList: function() { 

     var $cards = $(".card-items .tags"); 
     var list = []; 
     var $countryButtons = $('.card-filtering li .country-filtering'); 
     var countries = []; 

     $countryButtons.each(function() { 
      countries.push(this.firstChild.data.replace("#", "").toLowerCase()); 
     }); 

     //Get tag values, set to lowercase and store in List array 
     $cards.each(function() { 
      var tags = getTags($(this).val()); 
      $(tags).each(function (index, value) { 
       var tagValue = value.toLowerCase(); 
       if($.inArray(tagValue, countries) === -1) list.push(value); 
      }); 

     }); 

     //Remove duplicates from the array 
     var uniqueTags = []; 
     $.each(list, function(i, el){ 
      if($.inArray(el, uniqueTags) === -1) uniqueTags.push(el); 

     }); 
     uniqueTags.sort(); 

     function getTags(parameter) { 
      var arr = parameter.split(','); 
      return arr; 
     } 

     //Populate hash-tag List 
     var hashtagList = $('.hashtag-list'); 

     populateHashtagList(); 

     function populateHashtagList(callback) { 

      $.each(uniqueTags, function(i, el){ 
       var htmlToInsert = '<span class="active"><a href="#">' + el + '</a></span>'; 
       hashtagList.append(htmlToInsert); 
      }); 

      if(typeof callback == "function") 
      callback(); 
     } 
    }

我已經試過

使用$隔離功能（「趨勢卡」）。每個功能。這導致了相同的大型列表，但是每張幻燈片的數量都是三倍。
向.tags選擇器添加更多特定的路徑，它們什麼都不改變。
設置了.tags變量後，使用父級選擇器，並從那裏調用該函數的其餘部分。在這種情況下沒有標籤填充。

我很感激任何反饋意見和輸入。我想知道如何在未來更好地做到這一點。非常感謝你！

來源

2016-02-25 uxkidd

使用。每（）應該工作正常，你指定$卡選擇父母，當你嘗試過的解決方案？ $（「。card-items .tags」，this） – MakG

將此代碼包裝在.each（）函數中是最好的解決方案。你說過你嘗試過，你可能忘記了爲卡片和標籤列表選擇器指定父元素。

這裏是一個工作示例：https://jsfiddle.net/k3oajavs/

$(".trend-cards").each(function(){ 
    var $cards = $(".card-items .tags", this); 
    // ... 
    var hashtagList = $('.hashtag-list', this); 
});

來源

2016-02-25 14:26:49 MakG

非常感謝！這工作。 – uxkidd

如何迭代滑塊中每個幻燈片的jQuery函數？

回答

相關問題