在Codrops的内容中添加数组元素展开缩略图网格预览

Adding array element inside the content of Codrops Expanding thumbnail grid preview

本文关键字：略图 网格 数组元素 Codrops 添加      更新时间：2023-09-26

实际上如何在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 );

您可以将代码放入数据描述中：

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

如果这有帮助的话，但是我认为您需要使用span而不是div来处理额外的类。

相关文章：