Question

我正在尝试使用基于函数的空星替换此列表中的第3颗星。如果用户有超过10次移动，则应更换第3颗星。经过14次移动后，第二颗星也应该被替换。我已经尝试过replaceChild节点，但我根本无法使用它。以下是UL列表以及我尝试将其与之关联的功能。 replaceChild节点是最好的方法吗？

<div id="starRating">
  <ul id="stars" class="starlist" style="list-style-type:none">
     <li><img src="/images/filledstar.png" id="star1"> </li>
     <li><img src="/images/filledstar.png" id="star2"> </li>
     <li><img src="/images/filledstar.png" id="star3"> </li>
     <li><img src="/images/emptystar.png" id="star4"> </li>
   </ul>
</div>

function playerRating(moves) { //determines rating based on how many moves the player takes
  var rating = 3;
  if (moves > 10 && moves <= 13) {
    rating = 2;
  } else if (moves >= 14) {
    rating = 1;
  } else {
    rating = 3;
  } return rating;

  document.getElementById("rating").innerHTML = "Rating: "+ rating;
}

Answer 1

你没有解释是什么触发了这个功能，但它会起到这样的作用：

＆＃13;

// Get star references for empty and filled in
var filledStar1 = document.getElementById("filled1");
var filledStar2 = document.getElementById("filled2");
var filledStar3 = document.getElementById("filled3");
var emptyStar = document.getElementById("empty");

function playerRating(moves) { 
  var rating = 3;
  if (moves > 10 && moves <= 13) {
    filledStar3.src = emptyStar.src;
    rating = 2;
  } else if (moves >= 14) {
    filledStar2.src = emptyStar.src;
    filledStar3.src = emptyStar.src;
    rating = 1;
  } 
  return rating;

  document.getElementById("rating").textContent = "Rating: " + rating;
}

// Try these one at a time and you will see the ratings work
playerRating(9);
playerRating(11);
playerRating(14);

＆＃13;

img {width:50px;}

＆＃13;

<div id="starRating">
  <ul id="stars" class="starlist" style="list-style-type:none">
     <li><img src="http://www.bombmanual.com/manual/1/html/img/symbols/2-filledstar.png" id="filled1"> </li>
     <li><img src="http://www.bombmanual.com/manual/1/html/img/symbols/2-filledstar.png" id="filled2"> </li>
     <li><img src="http://www.bombmanual.com/manual/1/html/img/symbols/2-filledstar.png" id="filled3"> </li>
     <li><img src="https://cdn2.iconfinder.com/data/icons/snipicons/500/star-empty-m-128.png" id="empty"> </li>
   </ul>
</div>
<p id="rating"></p>

＆＃13;

使用javascript函数替换<li>图像

1 个答案: