在评等上方悬停时显示文本，单击时保持不变

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 (使用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');
});

Answer 2

试试这个代码：-

<form action="" method="post">
    <ul>
        <li id="rate-1">
            <label for="rating-1"><input type="radio" value="1" class="rating" name="rating" id="rating-1" />1 star</label>
        </li>
        <li id="rate-2">
            <label for="rating-2"><input type="radio" value="2" class="rating" name="rating" id="rating-2" />2 stars</label>
        </li>
        <li id="rate-3">
            <label for="rating-3"><input type="radio" value="3" class="rating" name="rating" id="rating-3" />3 stars</label>
        </li>
        <li id="rate-4">
            <label for="rating-4"><input type="radio" value="4" class="rating" name="rating" id="rating-4" />4 stars</label>
        </li>
        <li id="rate-5">
            <label for="rating-5"><input type="radio" value="5" class="rating" name="rating" id="rating-5" />5 stars</label>
        </li>
    </ul>
    <div class="rate">Rate this product</div>
</form>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$( "li" ).hover(
  function() {
    var rate = $( this ).find('.rating').val();

    if(rate ==1){
      $('.rate').html('bad');
    }
    if(rate == 2){
        $('.rate').html('good');
    }
    if(rate == 3){
        $('.rate').html('better');
    }
    if(rate == 4){
        $('.rate').html('best');
    }
     if(rate == 5){
        $('.rate').html('very best');
    }
  }, function() {
    var str = "Rate this product";
    $('.rate').html(str);
  }
);
</script>

js小提琴：- 链接

Answer 3

你读过关于.hover()的文章吗？

$( "#yourSelector ).hover(
  function() {
      // show or hide here.
  }
);