Как определить щелчок div. jQuery

Question

У меня есть сценарий, написанный в jQuery и PHP. Это небольшая система голосования. Когда я нажимаю мышь на div, он показывает желтые звезды, чтобы указать, когда у меня есть указатель. Например: http://prntscr.com/7pm8u6. Это не так интуитивно, как я хочу, потому что желтые звезды появляются на КАЖДОЙ почте на моей странице. Вы можете видеть это на скриншоте. Как я могу сделать divs уникальными для каждого сообщения?

$(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 мои дивы:

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>'; 

Answer 1

Если я читаю ваш PHP права, у вас уже есть информация о том, что оставить звезда связана в это имя атрибута. Так что все, что вам нужно сделать, это получить эту информацию, а затем выбрать только начинается с правильным названием:

$('.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'); 
    }; 
}); 

В своем коде вы даете кратные звезды и тот же идентификатор. Это плохая практика, поскольку идентификаторы должны быть уникальными. Рассмотрите возможность переноса этой информации в настраиваемый атрибут, например data-star-number или что-то в этом роде.