etozhetisachniy
@etozhetisachniy
Junior

Как правильно внедрить рейтинговую систему CSS?

Всем привет!
Уже был у меня такой вопрос.
У меня возникла проблема с уникальностью рейтинговой системы. есть 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";
}

который ведет на картинку заполненлй звезды? и как правильно тогда поменять данный контент?
  • Вопрос задан
  • 79 просмотров
Пригласить эксперта
Ответы на вопрос 1
@7rows
А где код нажатия??
Скорее всего, вы не перебираете в массиве элемент, а ищете самый первый и на него нажимаете.
попробуйте через this добавлять класс в функции нажатия
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы