在Codrops的內容內添加數組元素展開縮略圖網格預覽

Question

實際上是如何在Codrops擴展縮略圖網格預覽框中添加數組內容，我的意思是，如果我具有這樣的屬性，請嘗試>

data-size1="D: 15cm | H: 5cm" 
data-size2="D: 20cm | H: 6cm" 

data-price1="$ 23" 
data-price2="$ 49"


size1 : $itemEl.data( 'size1' ),
price1 : $itemEl.data( 'price1' ),
size2 : $itemEl.data( 'size2' ),
price2 : $itemEl.data( 'price2' )

this.$size1.html( eldata.size1 );
this.$price1.html( eldata.price1 );
this.$size2.html( eldata.size2 );
this.$price2.html( eldata.price2 );


this.$size1 = $( '<div class="size"></div>' );
this.$price1 = $( '<div class="price"></div>' );
this.$info1 = $( '<div class="info"></div>' ).append( this.$size1, this.$price1 );
this.$addtocart1 = $( '<a href="#" class="action"><img alt="" src="assets/img/btn_plus.png"</a>' );
this.$item1 = $( '<div class="item"></div>' ).append( this.$info1, this.$addtocart1 );
this.$variant1 = $( '<div class="item-list"></div>' ).append( this.$item1 );

this.$size2 = $( '<div class="size"></div>' );
this.$price2 = $( '<div class="price"></div>' );
this.$info2 = $( '<div class="info"></div>' ).append( this.$size2, this.$price2 );
this.$addtocart2 = $( '<a href="#" class="action"><img alt="" src="assets/img/btn_plus.png"</a>' );
this.$item2 = $( '<div class="item"></div>' ).append( this.$info2, this.$addtocart2 );
this.$variant2 = $( '<div class="item-list"></div>' ).append( this.$item2 );

this.$clearfix = $( '<div class="variant clearfix"></div>' ).append( this.$variant1, this.$variant2 );

Answer 1

您可以將代碼放入數據描述中：

<a href="# data-title="Azuki bean" data-description="Swiss <br>ddd<br>chard <h2>pumpkin bunya</h2> nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">

如果有幫助-但是我認為您將需要使用spans而不是divs作為其他類。