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?
Kosta KondratenkoAsked:
Who is Participating?
 
leakim971PluritechnicianCommented:
this look similar to your whole code :
jQuery(function($) {

	var callback = function(currentRating, $el){
		//alert('comment ID is: ' +	+ currentRating);
		$.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 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);
	}
		
	for(var i=0;i<5;i++) { // 0,1,2,3,4
		$(".my-rating-" + i).starRating({
			totalStars: 5,
			emptyColor: 'lightgray',
			hoverColor: 'salmon',
			activeColor: 'cornflowerblue',
			initialRating: i, // 0,1,2,3,4
			strokeWidth: 0,
			useGradient: false,
			callback: callback
		});
	}

});

Open in new window

0
 
leakim971PluritechnicianCommented:
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".
1
 
Kosta KondratenkoAuthor Commented:
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!
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
leakim971PluritechnicianCommented:
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 ?
0
 
Kosta KondratenkoAuthor Commented:
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.
1
 
Kosta KondratenkoAuthor Commented:
Thank you Leakim971 - I appreciate your help.
1
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.