Изменить CSS элемента HTML из машинописного текста / JavaScript - PullRequest
Новая
       8

Изменить CSS элемента HTML из машинописного текста / JavaScript

0 голосов
/ 26 июня 2018

Я использую виджет звездного рейтинга в одной из моих HTML-форм в своем приложении React JS.Я имею в виду этот виджет 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 ]

0 голосов
/ 26 июня 2018 
  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.Просто измените проверенное значение на true / false, а остальное должно быть обработано в CSS.

0 голосов
/ 26 июня 2018 

   <!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>
0 голосов
/ 26 июня 2018

Используйте инспектор браузера, чтобы понять, каково начальное состояние вашего виджета звездочек (классы, встроенные стили и т. Д.). Мой совет - не использовать встроенные стили.

После этого вам нужно восстановить начальные классы, вы можете сделать это с помощью: 

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

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

Если есть что-то вроде «проверено», вы можете сделать: 

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

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

В вашем случае вы можете снять отметку с элемента: 

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

Для каждого проверенного элемента вы можете снять галочку таким образом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...