CODEWITHSUNDEEP
javascriptjquerycss
Saifur Rahman Mohsin
Saifur Rahman Mohsin

Reputation: 1011

How do I set before content permanently using jquery

I use

.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

at shown here to display a rating bar. I wonder how I can permanently set this using javascript. I tried something like

  $( ".rating span" ).click(function() {
    $(this).html('\2605');
  });

but this clearly doesn’t work and it only affects that element which was clicked than the set of elements before as well. How do it do this? Thanks

Upvotes: 0

Views: 82

Answers (4)

Saifur Rahman Mohsin
Saifur Rahman Mohsin

Reputation: 1011

Finally got it to work. Thanks to everyone for the answers. Here’s the final code that I used

$( ".rating span" ).click(function() {
  var ratingBar = $(this).parent().attr('id');
  $('#' + ratingBar + ' span').text('☆');
  $(this).text('★');
  $(this).nextAll().text('★');
});
.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<span class="rating" for="Food" id="0">
  <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</span>

Upvotes: 0

Sleek Geek
Sleek Geek

Reputation: 4686

Try the method below:

$( ".rateThis span" ).click(function() {
    $('.rateThis').before().append('<i class="fa fa-star"></i>');
  });
span {
  cursor: pointer;
  }
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="rateThis">

<span>click here</span>

</div>

Note: This is just an example, study and adjust as needed.

Upvotes: 1

void
void

Reputation: 36703

You can always do

$( ".rating span" ).trigger("click");

and it will execute the trigger immediately.. :)

Upvotes: 0

Frankely Diaz
Frankely Diaz

Reputation: 906

You can create a class without the pseduo :hover: and apply that class to your elements.

Upvotes: 0

Related Questions