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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Angular Fundamentals

Learn the fundamentals of Angular 2, a JavaScript framework for developing dynamic single page applications.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.