如何通过 javascript 制作 html 和 css 组件？
Posted
技术标签:
【中文标题】如何通过 javascript 制作 html 和 css 组件？【英文标题】：how can I make a html and css component by javascript? 【发布时间】：2020-05-05 08:00:24 【问题描述】：我想总结一下我的 html 代码并用 javascript 制作一个组件。我的 Html 代码包含一个图片列表，我将它们放在 <li> 标记中。每张图片都有一个特殊的链接，以及一个 <div> 标签中的数字。我怎样才能制作一个通过 javascript 生成它们的模式？
另外，我想按照从高到低的数字对这些图片进行排序，但我不知道该怎么做。总而言之，这样总结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>
【问题讨论】：
为了提供帮助，我们需要更好地了解您的数据集，这是来自服务器吗？你会用ajax吗？是否有任何服务器端渲染可以代替这样做？ 没有要渲染的服务器。而且我没有使用 ajax。 【参考方案1】：如果你想从 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>如果您想自动创建链接数据，请使用此linkz=[];imgz.forEach((v,i)=>linkz[i]='page'+(i+1)+'.htm';);
而不是linkz=['page1.htm','page2.htm','page3.htm','page4.htm','page5.htm'];
【讨论】：
以上是关于如何通过 javascript 制作 html 和 css 组件？的主要内容，如果未能解决你的问题，请参考以下文章
如何通过 HTML 和 JavaScript 发送电子邮件？
您将如何制作 HTML 或 Javascript，或者如果需要 PHP 代码打开查看源代码？
怎么通过Html和Javascript制作一个静态的登录页面？