代码之家 › 专栏 › 技术社区 › Ricks

从typescript/javascript更改html元素的css

typescript css3 css html javascript

-1

Ricks · 技术社区 · 6 年前

我正在react js应用程序的html表单中使用star rating小部件。我指的是这个小部件 https://www.everythingfrontend.com/posts/star-rating-input-pure-css.html. 当用户单击五星之一的评级时,用户信息将保存到服务器。

当用户点击任何星星时,星星保持选中状态。我想在服务器返回用户下一步操作的响应时,将星号重置回未选中状态。

我不知道如何使用typescript/javascript来实现这一点。我试着把它改成如下:

    let ratingElement = document.querySelectorAll("#ratingField >  label");
    if (ratingElement.length > 0) {
      for (let i = 0; i < ratingElement.length; i++) {
        ratingElement[i].style.color = "#ddd";
      }
    }

使用上面的代码,颜色被重置。但是css中还有其他属性,比如 hover 我是说, checked 我是说, unchecked 在小部件上。如何添加这些属性来重置恒星,就像它的初始阶段一样?

下面是我的小部件css:

.rating {
  border: none;
  float: left;
}

.rating > input {
  display: none;
}
.rating > label:before {
  margin: 5px;
  font-size: 25px;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > label {
  color: #ddd;
  float: right;
}

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label {
  color: #ffd700;
} /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label {
  color: #ffed85;
}

我的html代码如下:

<fieldset
    className="rating"
    style={{ marginLeft: 5, marginRight: 5 }}
    id="ratingField"
>
    <input type="radio" id="star5" name="rating" value="5" />
    <label
        onClick={() => this.shortlist(5)}
        className="full"
        htmlFor="star5"
        title="Awesome"
    />
    <input type="radio" id="star4" name="rating" value="4" />
    <label
        onClick={() => this.shortlist(4)}
        className="full"
        htmlFor="star4"
        title="Pretty good"
    />
    <input type="radio" id="star3" name="rating" value="3" />
    <label
        onClick={() => this.shortlist(3)}
        className="full"
        htmlFor="star3"
        title="Average"
    />
    <input type="radio" id="star2" name="rating" value="2" />
    <label
        onClick={() => this.shortlist(2)}
        className="full"
        htmlFor="star2"
        title="Kinda bad"
    />
    <input type="radio" id="star1" name="rating" value="1" />
    <label
        onClick={() => this.shortlist(1)}
        className="full"
        htmlFor="star1"
        title="Worst"
    />
</fieldset>

有人能帮忙吗?

3 回复 | 直到 6 年前

1

Paolo Dell'Aguzzo 6 年前

使用浏览器检查器了解stars小部件(类、内联样式等)的初始状态。我的建议是不要使用内联样式。

之后,您必须恢复初始类,可以使用:

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

如果有类似“checked”的功能,您可以:

// Check
document.getElementById("checkbox").checked = true;

// Uncheck
document.getElementById("checkbox").checked = false;

在您的情况下,您可以取消选中元素,只要:

document.getElementById("star1").checked = false;

对于选中的每个元素,可以这样取消选中。

2

0

Rupesh Jain 6 年前

  let ratingElement = document.querySelectorAll("#ratingField input[type=radio]:checked");

  ratingElement.forEach( function( obj, idx ) {
    console.log(obj);
    obj.checked = false;
  });

检查这把小提琴- https://jsfiddle.net/8bk37a5j/16/

您不需要在JavaScript中设置样式。只需将“checked”值更改为true/false,其余的应该在css中处理。

3

0

Eshu 6 年前

   <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> 
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script>
$(document).ready(function(){
$('input[type="radio"]').click(function(){
$('input[type="radio"]').next('label').css('background-position','0 -16px')
for(var i=1;i<=parseInt($(this).attr('name'));i++)
{
$('input[name="'+i+'"]').next('label').css('background-position','0 0')
}
})
$('#reset').click(function(){
$('input[type="radio"]').next('label').css('background-position','0 -16px')
})
})
</script>
<style>
.rating {
    overflow: hidden;
    display: inline-block;
}

.rating-input {
    float: right;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0 0 0 -16px;
    opacity: 0;
}

.rating-star {
    cursor: pointer;
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    background: url('https://www.everythingfrontend.com/samples/star-rating/star.png') 0 -16px;
}

.rating-star:hover {
    background-position: 0 0;
}
</style>
<body>

       <span class="rating">
    <input type="radio" class="rating-input"
           id="rating-input-1-5" name="1">
    <label for="rating-input-1-5" class="rating-star"></label>
    <input type="radio" class="rating-input"
           id="rating-input-1-4" name="2">
    <label for="rating-input-1-4" class="rating-star"></label>
    <input type="radio" class="rating-input"
           id="rating-input-1-3" name="3">
    <label for="rating-input-1-3" class="rating-star"></label>
    <input type="radio" class="rating-input"
           id="rating-input-1-2" name="4">
    <label for="rating-input-1-2" class="rating-star"></label>
    <input type="radio" class="rating-input"
           id="rating-input-1-1" name="5">
    <label for="rating-input-1-1" class="rating-star"></label>
	<input type="button" value="Reset" id="reset">
</span>
    </body>
    </html>