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

У меня есть форма обратной связи, и для этого я использую 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>


html jquery emoticons
person Faizan    schedule 11.05.2018    source источник
comment
Добавьте, пожалуйста, функцию «EmotionRating» в фрагмент, который я вам сделал.   -  person mplungjan    schedule 11.05.2018
comment
Это плагин jQuery https://www.jqueryscript.net/demo/Emoji-Rating-Plugin-jQuery-Emotion-Ratings/   -  person Brainfeeder    schedule 11.05.2018

Ответы (2)


arrow_upward
1
arrow_downward

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

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>

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

person Takit Isy    schedule 11.05.2018
comment
что, если я хочу показать его в правом углу, а не в левом - person Faizan; 12.05.2018
comment
@Faizan я отредактировал. Лучший таргетинг с помощью JS-кода, добавлен класс, затем вы можете стилизовать с помощью CSS. - person Takit Isy; 12.05.2018

arrow_upward
0
arrow_downward

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

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

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

});

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

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

person Brainfeeder    schedule 11.05.2018