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 =＆＃34; checked＆＃34;来获得第一个着色的颜色。作为一个属性，然后继续你已经完成的事情，你可以做类似的事情：

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();
        }
    }
};

javascript累积箭头控制

1 个答案: