Jquery display clicked image and text

Question

Я пытаюсь отобразить текущее рейтинговое изображение, например, 3 звезды, а также его определение рейтинга, когда пользователь нажмет на нужный рейтинг и останется на этом рейтинге, пока пользователь не выберет другой рейтинг.

Или получите рейтинг, возвращаемый к рейтингу, который пользователь выбрал, когда пользователь наводится на другие номинальные значения, не выбирая (кликнув) другой рейтинг.

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

HTML

<form action="" method="post"> 
    <ul class="rating notrated"> 
     <li id="rate-1" data-desc="Bad"> 
      <label for="rating-1"><input type="radio" value="1" name="rating" id="rating-1" />1 star</label> 
     </li> 
     <li id="rate-2" data-desc="Good"> 
      <label for="rating-2"><input type="radio" value="2" name="rating" id="rating-2" />2 stars</label> 
     </li> 
     <li id="rate-3" data-desc="Great"> 
      <label for="rating-3"><input type="radio" value="3" name="rating" id="rating-3" />3 stars</label> 
     </li> 
     <li id="rate-4" data-desc="Better"> 
      <label for="rating-4"><input type="radio" value="4" name="rating" id="rating-4" />4 stars</label> 
     </li> 
     <li id="rate-5" data-desc="Best"> 
      <label for="rating-5"><input type="radio" value="5" name="rating" id="rating-5" />5 stars</label> 
     </li> 
    </ul> 
    <div class="rate">Rate this product</div> 
</form> 

Jquery

$(document).ready(function(){ 
    $('.rating li') 
    .on('mouseenter touchstart', function() { 
      var classSuffix = $(this).find('input').attr('id').split('-')[1]; 
      $('.rating').prevAll().addBack().addClass('rating-' + classSuffix); 
      $('.rating').nextAll().removeClass('notrated'); 
      $('.rate').text($(this).attr('data-desc')); 
    }) 
    .on('mouseleave touchend', function() { 
      var classSuffix = $(this).find('input').attr('id').split('-')[1]; 
      $('.rating').prevAll().addBack().removeClass('rating-' + classSuffix); 
      $('.rate').text('Rate this product'); 
    }); 
}); 

CSS

.rating{ 
    height: 30px; 
} 

.notrated{ 
    background-image: url('./stars.png'); 
    background-repeat: repeat-x; 
    background-position: 0px 0px; 
} 

.rating-1{ 
    background-image: url('./stars.png'); 
    background-repeat: repeat-x; 
    background-position: 0px -30px; 
} 

.rating-2{ 
    background-image: url('./stars.png'); 
    background-repeat: repeat-x; 
    background-position: 0px -60px; 
} 

.rating-3{ 
    background-image: url('./stars.png'); 
    background-repeat: repeat-x; 
    background-position: 0px -90px; 
} 

.rating-4{ 
    background-image: url('./stars.png'); 
    background-repeat: repeat-x; 
    background-position: 0px -120px; 
} 

.rating-5{ 
    background-image: url('./stars.png'); 
    background-repeat: repeat-x; 
    background-position: 0px -150px; 
} 

Answer 1

Я сделал небольшое изменение к вам код и добавил обработчик щелчка.

$(document).ready(function() { 
    $('.rating li') 
    .on('mouseenter touchstart', function() { 
     var classSuffix = $(this).find('input').attr('id').split('-')[1]; 
     $('.rating').prevAll().addBack().addClass('rating-' + classSuffix); 
     $('.rating').nextAll().removeClass('notrated'); 
     $('.rate').text($(this).attr('data-desc')); 
    }) 
    .on('mouseleave touchend', function() { 
     var classSuffix = $(this).find('input').attr('id').split('-')[1]; 
     $('.rating').prevAll().addBack().removeClass('rating-' + classSuffix); 
     $('.rate').text($('.rate').attr('data-desc')); 
    }) 
    .on('click', function() { 
     $('.rate').attr('data-desc', $(this).attr('data-desc')) 
    }); 
}); 

Я также добавил первоначальное описание к data-desc attriubute из .rate элемента

<div data-desc="Rate this product" class="rate">Rate this product</div> 

Отъезд jsFiddle

Answer 2

Добавить change событие отдельно для checkbox поддерживать «Оценили» текст после мыши оставлять.

$(document).ready(function() { 
     var checked = false, checkedElem; 
     $('.rating li') 
     .on('mouseenter touchstart', function() { 
      var classSuffix = $(this).find('input').attr('id').split('-')[1]; 
      $('.rating').prevAll().addBack().addClass('rating-' + classSuffix); 
      $('.rating').nextAll().removeClass('notrated'); 
      $('.rate').text($(this).attr('data-desc')); 
     }) 
     .on('mouseleave touchend', function() { 
      var classSuffix = $(this).find('input').attr('id').split('-')[1]; 
      if (checked) { 
       var classSuffix1 = checkedElem.attr('id').split('-')[1]; 
       $('.rating').prevAll().addBack().addClass('rating-' + classSuffix1); 
       $('.rating').nextAll().removeClass('notrated'); 
       $('.rate').text(checkedElem.closest('li').attr('data-desc')); 
      } 
      else { 
       $('.rating').prevAll().addBack().removeClass('rating-' + classSuffix); 
       $('.rate').text('Rate this product'); 
      } 
     }); 
     $('.rating li input') 
     .on('change', function() { 
      checkedElem = $(this); 
      var classSuffix = checkedElem.attr('id').split('-')[1]; 
      $('.rating').prevAll().addBack().addClass('rating-' + classSuffix); 
      $('.rating').nextAll().removeClass('notrated'); 
      $('.rate').text(checkedElem.closest('li').attr('data-desc')); 
      checked = true;     
     }) 
    }); 

UPDATE:

Example Fiddle

Answer 3

Это должно: изменять рейтинг, пока не будет нажата (с помощью мыши над). При нажатии на одно нажатие (выбрано) он сохраняет рейтинг до тех пор, пока он не будет изменен.

$(document).ready(function() { 
    $('.rating li').on('mouseenter touchstart', function() { 
     var checked = $('input[type=radio]:checked'); 
     var hasCheck = checked.length; 
     var classSuffix = $(this).find('input').attr('id').split('-')[1]; 
     $('.rating').prevAll().addBack().addClass('rating-' + classSuffix); 
     $('.rating').nextAll().removeClass('notrated'); 
     if (hasCheck) { 
     $('.rate').text(checked.parents('li').data('desc')); 
     } else { 
     $('.rate').text($(this).data('desc')); 
     } 
    }) 
    .on('mouseleave touchend', function() { 
     var hasCheck = $('input[type=radio]:checked').length; 
     var classSuffix = $(this).find('input').attr('id').split('-')[1]; 
     $('.rating').prevAll().addBack().removeClass('rating-' + classSuffix); 
     if (!hasCheck) { 
     $('.rate').text('Rate this product'); 
     } 
    }) 
    .on('change click', 'input[type=radio]', function() { 
     var checked = $('input[type=radio]:checked'); 
     var hasCheck = checked.length; 
     if (hasCheck) { 
     $('.rate').text(checked.parents('li').data('desc')); 
     } else { 
     $('.rate').text('Rate this product'); 
     } 
    }); 
}); 

Примечание: это также берет на себя вопросы, если он будет изменен с кодом: т.е.

$('input[type=radio]').prop("checked", false); 
$('input[type=radio]').trigger('change'); 

Поиграйте с ним здесь: http://jsfiddle.net/MarkSchultheiss/Lczv8zzj/