Как добавить значения против каждого смайлика jquery

Question

У меня есть форма обратной связи, и для этого я использую JQuery Feedback Library.Каждый смайлик содержит определенное значение. Например, «сердитый», «разочарованный», «ме», «счастливый», «смех»

для каждого смайлика есть значение, равное

angry = unsatisfactory
laughing = excellent

это все работает нормально, но я хочу показать значение в форме, например.

внизу первого смайлика, отображается неудовлетворительно

внизу второго смайлика, отображается Bad

внизу пятого смайлика отображается отлично.

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

Вам нравится такое поведение?
(Как и в вашем фрагменте, я не знаю, почему только последние правильно отображают значки, но скажите мне ...)

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>

Надеюсь, это поможет.

Answer 2

Вы можете попробовать что-то вроде:

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

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

});

Я использовал пример кода на странице плагина , имена классов могут отличаться от ваших.

Кроме тоговы можете добавить прослушиватель событий .on('hover'), чтобы отобразить значение, которое они собираются щелкнуть.