鍍金池/ 問答/HTML/ 怎么把回調(diào)回來的等級改成以星級顯示

怎么把回調(diào)回來的等級改成以星級顯示

把這個店鋪的等級clipboard.png改為下面這種星星的
clipboard.png

回答
編輯回答
孤慣

有很多種方法啊

  1. 你構(gòu)造一個自定義函數(shù),傳入等級的數(shù)組,生成一段對應(yīng)的html值,插入到那個位置就好了
  2. 你本身在那個位置構(gòu)造一個基礎(chǔ)的元素,然后根據(jù)等級給這個元素賦予不同的類,就可以顯示出不同的內(nèi)容了

......


對于1的模擬實現(xiàn)

... // 你回調(diào)定義部分
   // 下面是回調(diào)的具體部分
 function(x){ // 這里x假定是你獲得的星級數(shù)
      var htmlstr="";
      switch(x){ //在處理中改變htmlstr值
          case 1:
          // 1星級的處理
          break;
          case 2:
          // 2星級處理
          break;
          ....
          case 5:
          ....
          break;
      }
      e.html(htmlstr);// 這里e是要插入位置的dom元素,你要通過其他方法獲取到具體值,且html是默認(rèn)(或者通過其他庫綁定的方法)可以實現(xiàn)直接插入html格式內(nèi)容的方法函數(shù)。
 }
... //你其他處理

對于2的模擬實現(xiàn)

... // 你回調(diào)定義部分
   // 下面是回調(diào)的具體部分
 function(x){ // 這里x假定是你獲得的星級數(shù)
      switch(x){ //在處理中設(shè)置e的類型值,其中e是預(yù)先獲取的一個dom對象,且setClass是默認(rèn)(或者通過其他庫綁定的方法)可以實現(xiàn)直接設(shè)置e對象類值的方法函數(shù)。
          case 1:
          e.setClass("star1");
          break;
          case 2:
          e.setClass("star2");
          break;
          ....
          case 5:
          e.setClass("star5");
          break;
      }
      
 }
... //你其他處理
2018年6月3日 10:13
編輯回答
九年囚
<div class="background">
    <div class="star"></div>
</div>

1.設(shè)置background的背景圖為5個中間透明的?組成的背景圖
2.設(shè)置star的背景為5個實心的?組成的背景圖,background-size:0 0
3.根據(jù)等級,給star再加上對應(yīng)的類one,two,three,four或者five,設(shè)置每個類的backgroundsize:20%(40,60,80,100) 100%

2018年1月5日 22:14
編輯回答
陪妳哭
function showStar(rate){
    if(!Number.isInteger || rate < 0 || rate > 5){
        throw new Error("醒醒,參數(shù)錯了");
    }
    return "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate)
}

clipboard.png

2017年7月9日 10:42