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 fiddle： - link

Answer 3

您是否阅读了.hover()？

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

Answer 4

问题陈述不够明确，你可能需要类似的东西 -
HTML

 <div class="bad">Bad</div>
 <div class="rate" id="rating">Rate this product</div>

在Jquery部分 -

$("#rating").removeClass("rate");
$("#rating").addClass("bad");

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

4 个答案: