javascript - 将鼠标悬停在评级上时显示文本，并在单击时停留

Question

我希望能够替换 <div class="rate">Rate this product</div>具有 Bad, Better, Best 的评级描述之一当用户将鼠标悬停在评级上时，依此类推，并在用户单击评级时保留评级描述。我对 Jquery 相当陌生，所以我不知道从哪里开始。

HTML

<form action="" method="post">
    <ul>
        <li id="rate-1">
            <label for="rating-1"><input type="radio" value="1" name="rating" id="rating-1" />1 star</label>
        </li>
        <li id="rate-2">
            <label for="rating-2"><input type="radio" value="2" name="rating" id="rating-2" />2 stars</label>
        </li>
        <li id="rate-3">
            <label for="rating-3"><input type="radio" value="3" name="rating" id="rating-3" />3 stars</label>
        </li>
        <li id="rate-4">
            <label for="rating-4"><input type="radio" value="4" name="rating" id="rating-4" />4 stars</label>
        </li>
        <li id="rate-5">
            <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>

描述

<div>Bad</div>
<div>Better</div>
<div>Best</div>
<div>Great</div>
<div>Good</div>

Answer 1

尝试一下 jQuery(使用 fiddle https://jsfiddle.net/cwymmznw/ ):

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

// JS
$('input').hover(function(e) {
    $('.rate').text($(this).attr('data-desc'));
}, function(e) {
  if ($('.selected')) {
    $('.rate').text($('.selected').attr('data-desc'));
  } else {
    $('.rate').text('Rate this product');
  }
});

$('input').click(function(e) {
  $('.rate').text($(this).attr('data-desc'));
  $('.selected').removeClass('selected');
  $(this).addClass('selected');
});