Всем привет!
Уже был у меня такой вопрос.
У меня возникла проблема с уникальностью рейтинговой системы. есть 7 вопросов, все они сделаны через sharepoint, проблема в том что изначально я ничего не могу менять.
выглядит это так :
<tr><td><span class="ms-RadioText" title="1"><input id="SurveyQuestion1_efa091be-bde9-4d44-a7c9-69a04311cc89_$RadioButtonChoiceField0" type="radio" name="SurveyQuestion1_efa091be-bde9-4d44-a7c9-69a04311cc89_$RadioButtonChoiceField" value="1" checked="checked" aria-label="blablabla"><label for="SurveyQuestion1_efa091be-bde9-4d44-a7c9-69a04311cc89_$RadioButtonChoiceField0">1</label></span></td></tr>
и так 7 вопросов разница в уникальности id и label
я добавляю вот такой css star
Star.css.star-rating{
font-size: 0;
}
.star-rating__wrap{
display: inline-block;
font-size: 1rem;
}
.star-rating__wrap:after{
content: "";
display: table;
clear: both;
}
.star-rating__ico{
float: right;
padding-left: 2px;
cursor: pointer;
color: #FFB300;
}
.star-rating__ico:last-child{
padding-left: 0;
}
.star-rating__input{
display: none;
}
.star-rating__ico:hover:before,
.star-rating__ico:hover ~ .star-rating__ico:before,
.star-rating__input:checked ~ .star-rating__ico:before
{
content: "\f005";
}
и после нахожу через jquery все стандартные input и добавляю к ним класс
.star-rating__input
в котором display: none;
после я добавляю через JS label в котором идет дизайн звезд
jquery$(firstTable).append('<div class="star-rating" id="pastOne" >'); // a
$(firstTable).append(' <div class="star-rating__wrap" id="divOne">'); // b
$(firstTable).append('<label class="star-rating__ico fa fa-star-o fa-lg" for="SurveyQuestion1_efa091be-bde9-4d44-a7c9-69a04311cc89_$RadioButtonChoiceField4" title="5 out of 5 stars"></label>');
$(firstTable).append('<label class="star-rating__ico fa fa-star-o fa-lg" for="SurveyQuestion1_efa091be-bde9-4d44-a7c9-69a04311cc89_$RadioButtonChoiceField3" title="4 out of 5 stars"></label>');
$(firstTable).append('<label class="star-rating__ico fa fa-star-o fa-lg" for="SurveyQuestion1_efa091be-bde9-4d44-a7c9-69a04311cc89_$RadioButtonChoiceField2" title="3 out of 5 stars"></label>');
$(firstTable).append('<label class="star-rating__ico fa fa-star-o fa-lg" for="SurveyQuestion1_efa091be-bde9-4d44-a7c9-69a04311cc89_$RadioButtonChoiceField1" title="2 out of 5 stars"></label>');
$(firstTable).append('<label class="star-rating__ico fa fa-star-o fa-lg" for="SurveyQuestion1_efa091be-bde9-4d44-a7c9-69a04311cc89_$RadioButtonChoiceField0" title="1 out of 5 stars"></label>');
$(firstTable).append('</div>');
$(firstTable).append('</div>');
и вот когдая делаю так для каждой таблицы, у меня возникает проблема с уникальностью самих css звезд, при нажатии на любом другом ряду, звездочки добавляються только к первому вопросу, у которого уникальный css как и у всех других
(функционал работает нормально, но css часть пропадает) возможно ли это из за того что я использую {
content: "\f005";
}
который ведет на картинку заполненлй звезды? и как правильно тогда поменять данный контент?
