Skip to content
BASE DE CONNAISSANCE
  • Pages
    • Production
      • CSS
        • Etoiles css Version 1
        • Etoiles avec etiquettes
      • JAVASCRIPT
        • icon picker
          JS du style des étoiles avec etiquettes
        • Copie d'un texte dans le presse papier
        • CheckBox Avec question ouvert
      • HTML TEMPLATE
      • HOMAIR - Post-Stay - Summer 2024
        • css
        • js
      • tracking
      • Projects
      • Formulaire questionnaire
        • Historique de checking
      • CSM
      • Checklist Prod
      • Checklists
        • table_checklist_email
        • table_checklist_questionnaire
      • Clients
    • CSM
      • Tout type de questionnaire
        • NPS
        • Etoile
        • Choix unique
        • Choix multiple
        • Tableaux
        • Ouvert verbatims
        • Ouvert info. perso
BASE DE CONNAISSANCE
/
/
JS du style des étoiles avec etiquettes
Share
Explore

JS du style des étoiles avec etiquettes

⁠
Lien du style css
⁠
⁠
<script type="text/javascript">
$(document).ready(function() {
function createLabel(item, text, newClass)
{
var _arrow = $('<div />');
$(_arrow).addClass('left-arrow');
if( $(item).find('.label-wrapper').length > 0 )
{
var _item = $(item).find('.label-wrapper').get(0);
$(_item)
.removeClass()
.text(text)
.prepend(_arrow)
.addClass('label-wrapper')
.addClass(newClass);
return $(_item);
}
var _div = $('<div />');
$(_div)
.removeClass()
.addClass('label-wrapper')
.addClass(newClass)
.text(text)
.prepend(_arrow);
$(item).append(_div);
return $(item).find('.label-wrapper').get(0);
}
function deleteLabel(item, forceDelete)
{
if( $(item).find('.label-wrapper').length > 0 )
{
var _label = $(item).find('.label-wrapper').get(0);
if( $(_label).hasClass('clicked') )
{
if( forceDelete )
{
$(item).find('.label-wrapper').remove();
}
}
else
{
$(item).find('.label-wrapper').remove();
}
}
}
function getTextClass(item)
{
var _class = '';
if( $(item).hasClass('sg-star-1') )
{
_class = 'not-satisfied';
}
if( $(item).hasClass('sg-star-2') )
{
_class = 'not-very-satisfied';
}
if( $(item).hasClass('sg-star-3') )
{
_class = 'quite_satisfied';
}
if( $(item).hasClass('sg-star-4') )
{
_class = 'very-satisfied';
}
return _class;
}
function getText(item)
{
var _text = '';
if( $(item).hasClass('sg-star-1') )
{
_text = 'Pas du tout satisfait';
}
if( $(item).hasClass('sg-star-2') )
{
_text = 'Peu satisfait';
}
if( $(item).hasClass('sg-star-3') )
{
_text = 'Assez satisfait';
}
if( $(item).hasClass('sg-star-4') )
{
_text = 'Très satisfait';
}
return _text;
}
$('.sg-5stars > label').on('click', function() {
if( $(this).hasClass('sg-star-0') )
{
deleteLabel($(this).parent(), true);
return;
}
var _text = getText($(this));
var _wrapper = createLabel($(this).parent(), _text, getTextClass($(this)));
$(_wrapper).addClass('clicked');
});
$('.sg-5stars > label').on('mouseenter', function() {
if( $(this).hasClass('sg-star-0') )
{
return;
}
if( $(this).parent().find('.label-wrapper').length > 0 )
{
var _label = $(this).parent().find('.label-wrapper').get(0);
if( $(_label).hasClass('clicked') )
{
return;
}
}
var _text = getText($(this));
createLabel($(this).parent(), _text, getTextClass($(this)));
});
$('.sg-5stars > label').on('mouseleave', function() {
deleteLabel($(this).parent(), false);
});
$('.sg-star-0').attr('title', 'Supprimer ma notation');
});
</script>
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.