jquery - 如何为每个 jquery 表情添加值
问题描述
我有一个反馈表,为此我正在使用 JQuery 反馈库。每个笑脸都包含一些值 例如“愤怒”、“失望”、“嗯”、“快乐”、“笑”
每个笑脸都有一些价值
angry = unsatisfactory
laughing = excellent
这一切都很好,但我想要的是在表单上显示价值。
在第一个笑脸的底部显示不满意
在第二个笑脸的底部,它显示坏
在第五个笑脸的底部,它显示得很好。
var emotionsArray = ['angry', 'disappointed', 'meh', 'happy', 'laughing'];
$('.SmileyRating').each(function() {
var name = $(this).data('name');
$(this).emotionsRating({
emotionSize: 35,
inputName: name,
bgEmotion: 'happy',
emotions: emotionsArray,
color: '#FF0066', //the color must be expressed with a css code
disabled: false, //set if the rating can be changed or not, default is falseS ME
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Emoji-Rating-Plugin-jQuery-Emotion-Ratings/emotion-ratings.js"></script>
<div class="w3layouts_main wrap">
<h1 class="agile_head text-center" style="color:lime">Feedback</h1>
<form action="#" method="post" class="agile_form">
<h1 style="color: white; font-size: large">1. Quality of Service. </h1>
<h2 style="color : #0086ce">How satisfied were you with our Service?</h2>
<span class="SmileyRating" data-name="QualityOfService">
</span>
<br />
<h1 style="color: white; font-size: large">2. Quality of Food. </h1>
<h2 style="color : #0086ce">How satisfied were you with our Food?</h2>
<span class="SmileyRating" data-name="QualityOfFood">
</span>
<br />
<h1 style="color: white; font-size: large">3. Cleanliness of Lounge. </h1>
<h2 style="color : #0086ce">How satisfied were you with Marhaba Lounge Cleaning?</h2>
<span class="SmileyRating" data-name="CleanlinessOfLounge">
</span>
<br />
<h1 style="color: white; font-size: large">4. Friendliness of Staff </h1>
<h2 style="color : #0086ce">How satisfied were you with our Staff?</h2>
<span class="SmileyRating" data-name="FriendlinessOfStaff">
</span>
<br />
<h1 style="color: white; font-size: large">5. Overall experience. </h1>
<h2 style="color : #0086ce">How satisfied were you with Marhaba Lounge?</h2>
<span class="SmileyRating" data-name="OverAllExperience">
</span>
<br />
<h3 style="color: white; font-size: large">Valuable Suggestions.</h3>
<textarea placeholder="Additional comments" class="w3l_summary" name="Comments"></textarea>
<input type="submit" value="Submit" class="agileinfo" style=" background-color:white; color: #e60053 " onmouseover=" this.style.backgroundColor = '#e60053', this.style.color = 'white' " onmouseout=" this.style.backgroundColor = 'white', this.style.color = '#e60053'"
/>
</form>
</div>
解决方案
这是你想要的行为吗?
(就像在你的片段中一样,我不知道为什么只有最后一个正确显示图标,但请告诉我……)
var emotionsArray = ['angry', 'disappointed', 'meh', 'happy', 'laughing'];
$('.SmileyRating').each(function() {
var name = $(this).data('name');
$(this).emotionsRating({
emotionSize: 35,
inputName: name,
bgEmotion: 'happy',
emotions: emotionsArray,
color: '#FF0066', //the color must be expressed with a css code
disabled: false, //set if the rating can be changed or not, default is false
});
});
$('.emotion-style').on('click', function(e) {
value = $(this).data('index');
// Remove the current .emotion-text, if exists
$(this).closest('.emotion-container').find('.emotion-text').remove();
// Add the emotion-text as a span
$(this).closest('.emotion-container').append('<span class="emotion-text">' + emotionsArray[value] + '</span>');
});
body {
background: #aaa;
}
.agileinfo {
background-color: white;
color: #e60053
}
.agileinfo:hover {
background-color: #e60053;
color: white;
}
/* Added the below to stylize the class added by the JS code */
.emotion-text{
margin: 0 16px;
color: #e60053
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Emoji-Rating-Plugin-jQuery-Emotion-Ratings/emotion-ratings.js"></script>
<div class="w3layouts_main wrap">
<h1 class="agile_head text-center" style="color:lime">Feedback</h1>
<form action="#" method="post" class="agile_form">
<h1 style="color: white; font-size: large">1. Quality of Service. </h1>
<h2 style="color : #0086ce">How satisfied were you with our Service?</h2>
<span class="SmileyRating" data-name="QualityOfService"></span>
<br />
<h1 style="color: white; font-size: large">2. Quality of Food. </h1>
<h2 style="color : #0086ce">How satisfied were you with our Food?</h2>
<span class="SmileyRating" data-name="QualityOfFood"></span>
<br />
<h1 style="color: white; font-size: large">3. Cleanliness of Lounge. </h1>
<h2 style="color : #0086ce">How satisfied were you with Marhaba Lounge Cleaning?</h2>
<span class="SmileyRating" data-name="CleanlinessOfLounge"></span>
<br />
<h1 style="color: white; font-size: large">4. Friendliness of Staff </h1>
<h2 style="color : #0086ce">How satisfied were you with our Staff?</h2>
<span class="SmileyRating" data-name="FriendlinessOfStaff"></span>
<br />
<h1 style="color: white; font-size: large">5. Overall experience. </h1>
<h2 style="color : #0086ce">How satisfied were you with Marhaba Lounge?</h2>
<span class="SmileyRating" data-name="OverAllExperience"></span>
<br />
<h3 style="color: white; font-size: large">Valuable Suggestions.</h3>
<textarea placeholder="Additional comments" class="w3l_summary" name="Comments"></textarea>
<input type="submit" value="Submit" class="agileinfo" />
</form>
</div>
希望能帮助到你。
推荐阅读
- node.js - Strapi Upload Plugin - 如何放置从strapi后端js代码生成的文件
- flutter - 设置时的 ClampingScrollPhysics NeverScrollableScrollPhysics
- reactjs - 在故事书中设置时反应本机下拉选择器错误
- ios - 当两个框架包含与 iOS 中的资源相同的图像时,不从一个框架加载图像
- python - Kivy/KivyMD - 按钮没有反应
- airflow - Airflow - 获取报告的后端数据库
- python-3.x - 从 Python 列表中删除引号和白色字符
- android - Android Studio:设置并将选择的微调器值传输到下一个活动
- sql-server - 错误:按表达式分组必须至少包含一列不是外部引用
- elasticsearch - 更新 Elastic Search 中固定文档的分数