CODEWITHSUNDEEP
phpjqueryhtmlcss
NoLimes
NoLimes

Reputation: 81

How to identify clicked div. jQuery

I have script wrote in jQuery and PHP. It`s a little voting system. When i puting my mouse on a div, it showing a yellow stars to point when i have my pointer. For example: http://prntscr.com/7pm8u6 . It is not intuitive like that how i want to have, because yellow stars are appears on EVERY post on my page. You can see it on on screenshoot. How can i make the divs unique for every post?

$(function(){ 

    $('.rate-btn').hover(function(){

        $('.rate-btn').removeClass('rate-btn-hover');
        var therate = $(this).attr('id');
        for (var i = therate; i >= 0; i--) {
            $('.rate-btn-'+i).addClass('rate-btn-hover');
        };
    });

    $('.rate-btn').click(function(){    
        var therate = $(this).attr('id');
        var theid = $(this).attr('name');
        var dataRate = 'act=rate&post_id='+theid+'&rate='+therate; //
        $('.rate-btn').removeClass('rate-btn-active');
        for (var i = therate; i >= 0; i--) {
            $('.rate-btn-'+i).addClass('rate-btn-active');
        };
        $.ajax({
            type : "POST",
            url : "http://localhost/rating/ajax.php",
            data: dataRate,
            success:function(){}
        });

    });
});

It`s my divs:

echo '<div id="1" alt="';$post_id=$query2['id'];echo $post_id; echo '" class="rate-btn-1 rate-btn" name="';$post_id=$query2['id'];echo $post_id; echo '"></div>';
echo '<div id="2" alt="';$post_id=$query2['id'];echo $post_id; echo '" class="rate-btn-2 rate-btn" name="';$post_id=$query2['id'];echo $post_id; echo '"></div>';
echo '<div id="3" alt="';$post_id=$query2['id'];echo $post_id; echo '" class="rate-btn-3 rate-btn" name="';$post_id=$query2['id'];echo $post_id; echo '"></div>';
echo '<div id="4" alt="';$post_id=$query2['id'];echo $post_id; echo '" class="rate-btn-4 rate-btn" name="';$post_id=$query2['id'];echo $post_id; echo '"></div>';
echo '<div id="5" alt="';$post_id=$query2['id'];echo $post_id; echo '" class="rate-btn-5 rate-btn" name="';$post_id=$query2['id'];echo $post_id; echo '"></div>';

Upvotes: 0

Views: 62

Answers (1)

Anders
Anders

Reputation: 8577

If I read your PHP right, you already have information about what post a star is related to in it's name attribute. So all you need to do is retrieve that information and then only select starts with the correct name:

$('.rate-btn').hover(function(){

    $('.rate-btn').removeClass('rate-btn-hover');
    var postid = $(this).attr('name'); //Get the post id from the name.
    var therate = $(this).attr('id');
    for (var i = therate; i >= 0; i--) {
        //Only add the class to the stars with the right name.
        $('.rate-btn-'+i+'[name='+postid+']').addClass('rate-btn-hover');
    };
});

In your code you give multiple stars the same ID. This is bad practice, as ID:s should be unique. Consider migrating that information out into a custom attribute like data-star-number or something like that.

Upvotes: 1

Related Questions