如何通過 javascript 制作 html 和 css 組件？

Question

我想總結一下我的 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>

Answer 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 組件？

問題描述

1 個解決方案

解決方案1
1 已采納 2020-01-20 15:58:13

如何通過 javascript 制作 html 和 css 組件？

問題描述

1 個解決方案

解決方案1 1 已采納 2020-01-20 15:58:13

解決方案1
1 已采納 2020-01-20 15:58:13