2017-02-09 3 views
0

Привет, я хочу разместить звезды рейтинга на своей веб-странице. Работает отлично. Рейтинг добавляется в базу данных Но пользователь может оценивать снова и снова. Я хочу, чтобы звезды были отключены после курса один раз. Вот мой код. Пожалуйста, помогите мне. Спасибо.Отключить рейтинговые звезды после того, как они были оценены js

<!DOCTYPE html> 
<html lang="en"> 

<head> 
<link href="http://online-btw-berekenen.nl/rating/rating.css" rel="stylesheet" type="text/css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript" src="http://online-btw-berekenen.nl/rating/rating.js"></script> 
<script language="javascript" type="text/javascript"> 
$(function() { 
    $("#rating_star").codexworld_rating_widget({ 
     starLength: '5', 
     initialValue: '', 
     callbackFunctionName: 'processRating', 
     imageDirectory: 'images/', 
     inputAttr: 'postID' 
    }); 
}); 

function processRating(val, attrVal){ 
    $.ajax({ 
     type: 'POST', 
     url: 'rating.php', 
     data: 'postID='+attrVal+'&ratingPoints='+val, 
     dataType: 'json', 
     success : function(data) { 
      if (data.status == 'ok') { 
       alert('You have rated '+val+' to CodexWorld'); 
       $('#avgrat').text(data.average_rating); 
       $('#totalrat').text(data.rating_number); 
      }else{ 
       alert('Some problem occured, please try again.'); 
      } 
     } 
    }); 
} 
</script> 
<style type="text/css"> 
    .overall-rating{font-size: 14px;margin-top: 5px;color: #8e8d8d;} 
</style> 
</head> 
<body style="background-color:black"> 
    <h1>Give us star</h1> 
    <input name="rating" value="0" id="rating_star" type="hidden" postID="1" /> 
    <div class="overall-rating">(Average Rating <span id="avgrat"><?php echo $ratingRow['average_rating']; ?></span> 
Based on <span id="totalrat"><?php echo $ratingRow['rating_number']; ?></span> rating)</span></div> 

</body> 
</html> 

Нажмите и наведите funtion в javascript.

(function(a){ 
    a.fn.codexworld_rating_widget = function(p){ 
     var p = p||{}; 
     var b = p&&p.starLength?p.starLength:"5"; 
     var c = p&&p.callbackFunctionName?p.callbackFunctionName:""; 
     var e = p&&p.initialValue?p.initialValue:"0"; 
     var d = p&&p.imageDirectory?p.imageDirectory:"images"; 
     var r = p&&p.inputAttr?p.inputAttr:""; 
     var f = e; 
     var g = a(this); 
     b = parseInt(b); 
     init(); 
     g.next("ul").children("li").hover(function(){ 
      $(this).parent().children("li").css('background-position','0px 0px'); 
      var a = $(this).parent().children("li").index($(this)); 
      $(this).parent().children("li").slice(0,a+1).css('background-position','0px -28px') 
     },function(){}); 
     g.next("ul").children("li").click(function(){ 
      var a = $(this).parent().children("li").index($(this)); 
      var attrVal = (r != '')?g.attr(r):''; 
      f = a+1; 
      g.val(f); 
      if(c != ""){ 
       eval(c+"("+g.val()+", "+attrVal+")") 
      } 
     }); 
     g.next("ul").hover(function(){},function(){ 
      if(f == ""){ 
       $(this).children("li").slice(0,f).css('background-position','0px 0px') 
      }else{ 
       $(this).children("li").css('background-position','0px 0px'); 
       $(this).children("li").slice(0,f).css('background-position','0px -28px') 
      } 
     }); 
     function init(){ 
      $('<div style="clear:both;"></div>').insertAfter(g); 
      g.css("float","left"); 
      var a = $("<ul>"); 
      a.addClass("codexworld_rating_widget"); 
      for(var i=1;i<=b;i++){ 
       a.append('<li style="background-image:url('+d+'/widget_star.gif)"><span>'+i+'</span></li>') 
      } 
      a.insertAfter(g); 
      if(e != ""){ 
       f = e; 
       g.val(e); 
       g.next("ul").children("li").slice(0,f).css('background-position','0px -28px') 
      } 
     } 
    } 
})(jQuery); 
+0

где вы обрабатываете щелчок по звездам? –

+0

@FanyoSILIADIN Я добавил клик js. Пожалуйста, отметьте –

ответ

0

ОК, в вашем обработчике щелчка просто удалите прослушиватель событий щелчка, используя метод jquery off().

0

Есть несколько шагов, чтобы отключить щелкать и парят события после того, как пользователь успешно выбран (& записи) рейтинг:

Добавить строку в ваш АЯКС успех

success : function(data) { 
    if (data.status == 'ok') { 
     alert('You have rated '+val+' to CodexWorld'); 
     $('#avgrat').text(data.average_rating); 
     $('#totalrat').text(data.rating_number); 
     $('.codexworld_rating_widget').addClass('already_set'); 
    }else{... 

Затем добавьте функцию для отключения каждого наведения & нажмите на <li> в сценарии «http://online-btw-berekenen.nl/rating/rating.js». Смотрите пример ниже:

g.next("ul").children("li").hover(function(){ 
    if ('.codexworld_rating_widget.alreadyset') { 
     $('.codexworld_rating_widget').off('click','li').off('hover','li'); 
    }else{ 

     // original script goes here 
    }); 

}); 

В любом случае, я не могу проверить его без создания песочницу, так ... надеюсь, что это помогает направить вас в правильном направлении.

+0

. Вы упомянули сценарий orignal. не могли бы вы рассказать мне, какой оригинальный сценарий? –

Смежные вопросы