asked on

How to refer to the current element in a function

Hi,

I have the following <div> on my page URL: http://www.headstudios.com.au/book/wpwa_question/why-do-the-assignemtns-have-an-underscore/

<div class="my-rating" comment_id="59" curr_star=3>

This is done for every comment and I have jQuery that activates a 5 star rating system which can be found here:
https://github.com/nashio/star-rating-svg/blob/master/demo/index.html (it's basically where you can select a rating with jQuery from 5 stars)

Anyway the following jQuery code activates the stars:

<script type="text/javascript">
  window.onload = function() { 
  jQuery( document ).ready(function() {
    jQuery(".my-rating").starRating({
totalStars: 5,
  emptyColor: 'lightgray',
  hoverColor: 'salmon',
  activeColor: 'cornflowerblue',
  initialRating: jQuery(this).attr('curr_star'),
  strokeWidth: 0,
  useGradient: false,
  callback: function(currentRating, $el){
      //alert('comment ID is: ' +  + currentRating);
      
      jQuery.post( "http://www.headstudios.com.au/book/wp-content/plugins/wpwa-questions/update-star.php", { comment_id: $el[0].getAttribute('comment_id'), rating: currentRating } );
      
      //alert("The comment of

Open in new window

..

You will see I have the following code:

  initialRating: jQuery(this).attr('curr_star'),

Open in new window

However this does not work because no initial stars are shown - when there should be 3 initial stars shown (since the 'curr_star' attribute is 3. Does anyone know what I am doing wrong? I would like to have the number in the 'curr_star' attribute be passed to the 'initialRating'.

Any ideas?

leakim971

1 - the following lines are doing, basically, the same thing
window.onload = function() {
jQuery( document ).ready(function() {
so replace them by (a new version similar too), shortcut :
jQuery(function($) {

2 - $(this) in your code, at this emplacement is the $(document) so it's not your "div". I checked your page and I did not found any <div class="my-rating".

Kosta Kondratenko

ASKER

Hi Leakim971,

I apologise I didn't include the Wordpress login - as that page requires you to be logged in to see the issue I'm referring to.

I have created a separate author login for you to be able to see the problem which you can view in the link below:
WP:
URL: headstudios.com.au/book/wp-admin
U: leakim971
P: password971

Issue: http://www.headstudios.com.au/book/wpwa_question/sample-question-being-asked/

If you go to that link you'll see that there are multiple answers which you can then mark out of 5 stars. The only thing is - while this version works (it even works to save your star rating) - I have implemented it in a dirty solution type of way by having the following code:

 <script type="text/javascript">
  window.onload = function() { 
  jQuery( document ).ready(function() {
    jQuery(".my-rating").starRating({
totalStars: 5,
  emptyColor: 'lightgray',
  hoverColor: 'salmon',
  activeColor: 'cornflowerblue',
  initialRating: jQuery(this).attr('curr_star'),
  strokeWidth: 0,
  useGradient: false,
  callback: function(currentRating, $el){
      //alert('comment ID is: ' + <?php echo get_comment_ID();  ?> + currentRating);
      
      jQuery.post( "<?php echo plugin_dir_url(__FILE__).'update-star.php'; ?>", { comment_id: $el[0].getAttribute('comment_id'), rating: currentRating } );
      
      //alert("The comment of this element is -: " + $el[0].getAttribute('comment_id'));
      //var i;
      //for (i = 0; i < $el.length ; i++) 
      //console.log('DOM element ', $el.elements[i].value);
  }
});


jQuery(".my-rating-0").starRating({
totalStars: 5,
  emptyColor: 'lightgray',
  hoverColor: 'salmon',
  activeColor: 'cornflowerblue',
  strokeWidth: 0,
  useGradient: false,
  callback: function(currentRating, $el){
      //alert('comment ID is: ' + <?php echo get_comment_ID();  ?> + currentRating);
      
      jQuery.post( "<?php echo plugin_dir_url(__FILE__).'update-star.php'; ?>", { comment_id: $el[0].getAttribute('comment_id'), rating: currentRating } );
      
      //alert("The comment of this element is -: " + $el[0].getAttribute('comment_id'));
      //var i;
      //for (i = 0; i < $el.length ; i++) 
      //console.log('DOM element ', $el.elements[i].value);
  }
});


jQuery(".my-rating-1").starRating({
totalStars: 5,
  emptyColor: 'lightgray',
  hoverColor: 'salmon',
  activeColor: 'cornflowerblue',
  initialRating: 1,
  strokeWidth: 0,
  useGradient: false,
  callback: function(currentRating, $el){
      //alert('comment ID is: ' + <?php echo get_comment_ID();  ?> + currentRating);
      
      jQuery.post( "<?php echo plugin_dir_url(__FILE__).'update-star.php'; ?>", { comment_id: $el[0].getAttribute('comment_id'), rating: currentRating } );
      
      //alert("The comment of this element is -: " + $el[0].getAttribute('comment_id'));
      //var i;
      //for (i = 0; i < $el.length ; i++) 
      //console.log('DOM element ', $el.elements[i].value);
  }
});


jQuery(".my-rating-2").starRating({
totalStars: 5,
  emptyColor: 'lightgray',
  hoverColor: 'salmon',
  activeColor: 'cornflowerblue',
  initialRating: 2,
  strokeWidth: 0,
  useGradient: false,
  callback: function(currentRating, $el){
      //alert('comment ID is: ' + <?php echo get_comment_ID();  ?> + currentRating);
      
      jQuery.post( "<?php echo plugin_dir_url(__FILE__).'update-star.php'; ?>", { comment_id: $el[0].getAttribute('comment_id'), rating: currentRating } );
      
      //alert("The comment of this element is -: " + $el[0].getAttribute('comment_id'));
      //var i;
      //for (i = 0; i < $el.length ; i++) 
      //console.log('DOM element ', $el.elements[i].value);
  }
});


jQuery(".my-rating-3").starRating({
totalStars: 5,
  emptyColor: 'lightgray',
  hoverColor: 'salmon',
  activeColor: 'cornflowerblue',
  initialRating: 3,
  strokeWidth: 0,
  useGradient: false,
  callback: function(currentRating, $el){
      //alert('comment ID is: ' + <?php echo get_comment_ID();  ?> + currentRating);
      
      jQuery.post( "<?php echo plugin_dir_url(__FILE__).'update-star.php'; ?>", { comment_id: $el[0].getAttribute('comment_id'), rating: currentRating } );
      
      //alert("The comment of this element is -: " + $el[0].getAttribute('comment_id'));
      //var i;
      //for (i = 0; i < $el.length ; i++) 
      //console.log('DOM element ', $el.elements[i].value);
  }
});


jQuery(".my-rating-4").starRating({
totalStars: 5,
  emptyColor: 'lightgray',
  hoverColor: 'salmon',
  activeColor: 'cornflowerblue',
  initialRating: 4,
  strokeWidth: 0,
  useGradient: false,
  callback: function(currentRating, $el){
      //alert('comment ID is: ' + <?php echo get_comment_ID();  ?> + currentRating);
      
      jQuery.post( "<?php echo plugin_dir_url(__FILE__).'update-star.php'; ?>", { comment_id: $el[0].getAttribute('comment_id'), rating: currentRating } );
      
      //alert("The comment of this element is -: " + $el[0].getAttribute('comment_id'));
      //var i;
      //for (i = 0; i < $el.length ; i++) 
      //console.log('DOM element ', $el.elements[i].value);
  }
});


jQuery(".my-rating-5").starRating({
totalStars: 5,
  emptyColor: 'lightgray',
  hoverColor: 'salmon',
  activeColor: 'cornflowerblue',
  initialRating: 5,
  strokeWidth: 0,
  useGradient: false,
  callback: function(currentRating, $el){
      //alert('comment ID is: ' + <?php echo get_comment_ID();  ?> + currentRating);
      
      jQuery.post( "<?php echo plugin_dir_url(__FILE__).'update-star.php'; ?>", { comment_id: $el[0].getAttribute('comment_id'), rating: currentRating } );
      
      //alert("The comment of this element is -: " + $el[0].getAttribute('comment_id'));
      //var i;
      //for (i = 0; i < $el.length ; i++) 
      //console.log('DOM element ', $el.elements[i].value);
  }
});
});
  } 
  </script>

Open in new window

As you can see I need to have 5 separate classes in order to set 5 separate initialRatings - this is because I don't know how ot refer to the current element. If I did I could just do:

initialRating: jQuery(this).attr('curr_star')

And that would remove the need to have 5 separate pieces of code that basically do the same thing. Unfortunately I don't know how to get the 'curr_star' attribute of the current div and input it into initialRating.

Hope this clears up the answer for you somewhat.

P.S. I understand the window.onLoad function is strange but the reason it is setup like this was because I had trouble adding this code underneath the jQuery definition in Wordpress - however that is not the main issue at the moment and is not the reason why what I am trying to do primarily here is not working.

Thank you for your assistance so far!

leakim971

I checked their code and at first look, the parameter "initialRating" is NOT used.
instead the curr_start attribute is used, this is fine as you want o use it
initialRating is a useless parameter
so everything look ok for me
could you confirm what is missing ?

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Kosta Kondratenko

ASKER

Thank you! That also works!

My initial plan was to get the initialRating by referring to the current element's attribute - but you have approached it in a different way and it still compact (which was my original goal) and gets the job done.

It also shows me some tactics I didn't know I could do in jQuery.

Thank you for your assistance - I will mark question as Solved.

Kosta Kondratenko

ASKER

Thank you Leakim971 - I appreciate your help.