CODEWITHSUNDEEP
javascriptjqueryhtml
linkNES
linkNES

Reputation: 113

Display text when hovering over a rating and have stay when clicked

I want to be able to replace the <div class="rate">Rate this product</div> with one of the rating descriptions of Bad, Better, Best and so on when the user hovers over the rating and have the rating description stay when the user clicks on the rating. I'm fairly new to Jquery so I do not know where to begin.

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>

Descriptions

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

Upvotes: 0

Views: 719

Answers (4)

akosel
akosel

Reputation: 1183

Try this out for jQuery (with 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');
});

Upvotes: 2

shakhawat
shakhawat

Reputation: 2727

Problem statement is not clear enough, you might need something similar to this -
html

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

In Jquery part - 

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

Upvotes: 0

Yasser Shaikh
Yasser Shaikh

Reputation: 47794

Have you read about .hover() ?

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

Upvotes: 0

Gaurav Srivastava
Gaurav Srivastava

Reputation: 3232

try this code:-

<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

Upvotes: 0

Related Questions