如何通过 javascript 制作 html 和 css 组件？答案

【问题标题】：how can I make a html and css component by javascript?如何通过 javascript 制作 html 和 css 组件？
【发布时间】：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。

标签： javascript jquery html css components

【解决方案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'];

【讨论】：