如何为每个 jquery 个表情符号添加值

Question

我有一个反馈表，为此我正在使用 JQuery 反馈库。每个笑脸包含一些值例如 'angry'、'disappointed'、'meh'、'happy'、'laughing'

每个笑脸都有一些价值

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>

Answer 1

您可以尝试类似的方法：

$('.emotion-style').on('click', function(e) {
    var trigger = $(this),
        value = trigger.data('index');

    $('.emotion-container').append('<span>'+emotionsArray[value]+'</span>');

});

我使用了 plugin page 上的示例代码，class 名称可能与您的不同。

此外，您可以添加一个 .on('hover') 事件监听器来显示他们将要点击的值。

Answer 2

这是您想要的那种行为吗？
（就像在您的代码段中一样，我不知道为什么只有最后一个才能正确显示图标，但请告诉我……）

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>

希望对您有所帮助。

如何为每个 jquery 个表情符号添加值

How to add values against each jquery emoticons

html

jquery

emoticons