如何通过 javascript 制作 html 和 css 组件？
[英]how can I make a html and css component by javascript?
问题描述
I want to summarize my HTML code and making a component by Javascript.
我想总结一下我的 HTML 代码并通过 Javascript 制作一个组件。 My Html code contains a list of the picture that I put them in <li> tags.我的 Html 代码包含我将它们放在<li>标签中的图片列表。 every picture has a special link, and a number into a <div> tag.how can I make a pattern for generating them by javascript?每张图片都有一个特殊的链接，一个数字到一个<div>标签中。我怎样才能制作一个通过 javascript 生成它们的模式？
Also, I want to sort these pics by that numbers, according to, highest to lowest, and I don't know how to do that.另外，我想按照这些数字从高到低对这些图片进行排序，但我不知道该怎么做。 Totally, Is it true to summarize HTML code in this way?总而言之，这样总结HTML代码是真的吗？
<ul class="product-list">
<li class="product-item">
<a id="producItem1" href="page2.htm">
<img class="clothes" src="dress1.jpg">
</a>
<div class="price-holder">
<p id="price1">250,000</p>
</div>
</li>
<li class="product-item">
<a id="producItem2">
<img class="clothes" src="coat1.jpg">
</a>
<div class="price-holder">
<p id="price2">350,000</p>
</div>
</li>
<li class="product-item">
<a id="producItem3">
<img class="clothes" src="shirt1.jpg">
</a>
<div class="price-holder">
<p id="price3">150,000</p>
</div>
</li>
<li class="product-item">
<a id="producItem4">
<img class="clothes" src="skirt1.jpg">
</a>
<div class="price-holder">
<p id="price4">200,000</p>
</div>
</li>
</ul>
1 个解决方案
解决方案1
1 已采纳 2020-01-20 15:58:13
use this if you want to create list from javascript data you can use objects but i used arrays because you said no server involved so you will generate the data of image names and prices manually如果你想从 javascript 数据创建列表，你可以使用对象，但我使用数组，因为你说不涉及服务器，所以你将手动生成图像名称和价格的数据
$(document).ready(function(){ imgz=['dress1.jpg', 'coat1.jpg', 'shirt1.jpg', 'skirt1.jpg','dress2.jpg']; prices=[100000, 200000, 150000, 250000, 300000]; linkz=['page1.htm','page2.htm','page3.htm','page4.htm','page5.htm']; //linkz=[];imgz.forEach((v,i)=>{linkz[i]='page'+(i+1)+'.htm';}); imgz.map((z,i)=> $('body').append(` <li class="product-item"> <a id="producItem${i+1}" href='${linkz[i]}'> <img class="clothes" src="${imgz[i]}"> </a> <div class="price-holder"> <p id="price${i+1}">${prices[i]}</p> </div> </li>`)); });
<html><head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"> </script></head> <body><ul class="product-list"></ul></body></html>
and if you want to create the links data automatically use this如果您想自动创建链接数据，请使用此linkz=[];imgz.forEach((v,i)=>{linkz[i]='page'+(i+1)+'.htm';});
instead of linkz=['page1.htm','page2.htm','page3.htm','page4.htm','page5.htm'];而不是linkz=['page1.htm','page2.htm','page3.htm','page4.htm','page5.htm'];
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.