javascript 累积箭头控件

Question

我正在研究评级系统。到目前为止，我拥有的是三颗心，它们在点击时会以累积的方式变色(如果点击三颗心中的第二颗，那么第一颗心和两颗心都会变色。如果点击第三颗，那么三颗心都会变色)点击)。我不确定是否清楚，但您可以看到我的代码的插图 here

到目前为止我得到的是:

HTML

<section id="like" class="rating">

  <!-- THIRD HEART -->
  <input type="radio" id="heart_3" name="like" value="3" />
  <label for="heart_3" class="heart-slider">&#9829;</label>
  <!-- SECOND HEART -->
  <input type="radio" id="heart_2" name="like" value="2" />
  <label for="heart_2" class="heart-slider">&#9829;</label>
  <!-- FIRST HEART -->
  <input type="radio" id="heart_1" name="like" value="1" />
  <label for="heart_1" class="heart-slider">&#9829;</label>
</section>

CSS

.rating {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 140px;
  height: 50px;
  padding: 5px 10px;
  margin: auto;
  border-radius: 30px;
  background: #FFF;
  display: block;
  overflow: hidden;


  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating:not(:checked) > input {
  display: none;
}

/* - - - - - LIKE */
#like {
  bottom: -65px;
}
#like:not(:checked) > label {
  cursor:pointer;
  float: right;
  width: 30px;
  height: 30px;
  display: block;
  margin-right: 7.5px;

  color: rgba(233, 54, 40, .4);
  line-height: 42px;
  text-align: center;
  transition: color 0.2s;
}
#like:not(:checked) > label:hover,
#like:not(:checked) > label:hover ~ label {
  color: rgba(233, 54, 40, .6);
}
#like > input:checked + label:hover,
#like > input:checked + label:hover ~ label,
#like > input:checked ~ label:hover,
#like > input:checked ~ label:hover ~ label,
#like > label:hover ~ input:checked ~ label {
 color: rgb(233, 54, 40);

}
#like > input:checked ~ label {
  color: rgb(233, 54, 40);
}

JS

    document.onkeydown = function (e) {

      if(e.keyCode == 38) {
        heart_1.click();
    }
}; 

我现在想要实现的是:

1) 在加载页面时让第一颗心已经着色

2) 带有向上和向下箭头的键盘控制:

• 第一个向上箭头使第一个+第二个心形变色
• 第二个向上箭头使第一+第二+第三颗心变色

然后，

• 第一个向下箭头使第三颗心变色
• 第二个向下箭头使第三个+第二个心脏变色

我对 Javascript 不太熟悉，我很乐意在这方面获得一些帮助。

干杯

Answer 1

您可以通过简单地添加 checked="checked"作为属性来为第一个着色，然后继续您已经完成的操作，您可以执行如下操作:

document.onkeydown = function (e) {
    if(e.keyCode == 38) {
        if (heart_2.checked) {
            heart_3.click();
        } else if (heart_1.checked) {
            heart_2.click();
        }
    }
    if(e.keyCode == 40) {
        if (heart_3.checked) {
            heart_2.click();
        } else if (heart_2.checked) {
            heart_1.click();
        }
    }
};