Форум

artsem · #1 (**permalink**) 23.07.2017, 13:19

Здравствуйте, есть голосовалка по 4 параметрам, подскажите как можно сократить её js. Сам понимаю что занимаюсь копипастом, вот пример для двух параметров.
HTML:

<div id="stats">
    <div id="ratingBar0">
	<div id="rat-ic0" title=""></div>
	<div id="rat-st0">86%</div>
	<div id="rating0">
		<div id="ratZero0"></div>
		<div id="ratDone0"></div>
		<div id="ratHover0"></div>
	</div>
	<div id="ratBlocks0"></div>
	<div id="ratStat0"></div>
    </div>
    <div id="ratingBar1">
	<div id="rat-ic1" title=""></div>
	<div id="rat-st1">86%</div>
	<div id="rating1">
		<div id="ratZero1"></div>
		<div id="ratDone1"></div>
		<div id="ratHover1"></div>
	</div>
	<div id="ratBlocks1"></div>
	<div id="ratStat1"></div>
    </div>
</div>
</div>

Сам JS:

<script type="text/javascript">
var idUser = "18678";
var starWidth = 20;
var coords;
var stars;
var razn = 500;
var put = ["vote_kult", "vote_humor"];
var voteAll = ["5", "5"];
var ratingS = ["74%","84%"];
var i = 0;
  for (var a = 0; a <= 1;a++) {
  	$("#ratStat"+a).html("Оценили: <strong>"+voteAll[a]+"</strong><span class='st-people'></span>");
  	$("#ratDone"+a).css("width", ratingS[a]);
    }

$(document).ready(function(){
$("#rating0").mousemove(function(e){
 var offset = $("#rating0").offset();
 coords = e.clientX - offset.left;
 stars = Math.ceil(coords/starWidth); 
 starsCss = stars*starWidth;
 $("#ratHover0").css("width", starsCss).attr("title", stars+" из 10");
});
$("#rating0").mouseout(function(){$("#ratHover0").css("width", 0);});
$("#rating0").click(function(){
 $.ajax({
  type: "GET",
  url: "php/vote/action.php",
  data: {"id": idUser, "rating": stars},
  cache: false,
  success: function(response){
  if(response == 1){
   var st = stars*starWidth;
   $("#ratHover0").css("display", "none");
   $("#ratDone0").animate({width: st},razn);
   $("#ratBlocks0").show();
   $("#ratStat0").html("Вы поставили: <strong>"+stars+"</strong>");
   }else{
   $("#ratStat0").text(response);
   }							
  }
 });
  return false;
});

$("#rating1").mousemove(function(e){
 var offset = $("#rating1").offset();
 coords = e.clientX - offset.left;
 stars = Math.ceil(coords/starWidth); 
 starsCss = stars*starWidth;
 $("#ratHover1").css("width", starsCss).attr("title", stars+" из 10");
});
$("#rating1").mouseout(function(){$("#ratHover1").css("width", 0);});
$("#rating1").click(function(){
 $.ajax({
  type: "GET",
  url: "php/vote/action.php",
  data: {"id": idUser, "rating": stars},
  cache: false,
  success: function(response){
  if(response == 1){
   var st = stars*starWidth;
   $("#ratHover1").css("display", "none");
   $("#ratDone1").animate({width: st},razn);
   $("#ratBlocks1").show();
   $("#ratStat1").html("Вы поставили: <strong>"+stars+"</strong>");
   }else{
   $("#ratStat1").text(response);
   }							
  }
 });
  return false;
});
</script>

j0hnik · #2 (**permalink**) 23.07.2017, 13:25

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

artsem · #3 (**permalink**) 23.07.2017, 13:41

можно пример? а то с моими познаниями функций в js ,беда.

laimas · #4 (**permalink**) 23.07.2017, 14:52

Сообщение от artsem

"<?php echo $vote_kult; ?>", "<?php echo $vote_humor; ?>"

Что нельзя прописать реальное, а не РНР код? Вы представляете того, кто пытаясь вам помочь будет копировать и запускать ваш код?

artsem · #5 (**permalink**) 23.07.2017, 15:10

Сообщение от laimas

Что нельзя прописать реальное, а не РНР код? Вы представляете того, кто пытаясь вам помочь будет копировать и запускать ваш код?

извините, просмотрел. Уже поправил.

laimas · #6 (**permalink**) 23.07.2017, 16:29

<!DOCTYPE HTML>
<html>
<head>
<script>
var idUser = 18678,
    starWidth = 20,
    coords, stars,
    razn = 500,
    put = ["vote_kult", "vote_humor"],
    rate = [{vote: 5, rating: '74%'}, {vote: 5, rating: '84%'}];
 
$(function() {

    $('.rating').each(function(i, e) {
        $(e).find(".ratDone").width(rate[i].rating)
            .end()
            .parent().find(".ratStat").html("Оценили: <strong>"+rate[i].vote+"</strong><span class='st-people'></span>")
    }).mousemove(function(e){
        var o = $(this);
        coords = e.clientX - o.offset().left;
        stars = Math.ceil(coords/starWidth);
        o.find(".ratHover").width(stars*starWidth).attr("title", stars+" из 10")
    }).mouseout(function(){
        $(this).find(".ratHover").width(0)
    }).click(function(){
        var o = $(this);
        $.ajax({
            type: "GET",
            url: "php/vote/action.php",
            data: {"id": idUser, "rating": stars},
            cache: false,
            success: function(response){
                if(response == 1){
                    o.find(".ratHover").hide();
                    o.find(".ratDone").animate({width: stars*starWidth},razn);
                    o.parent().find(".ratBlocks").show()
                              .next().html("Вы поставили: <strong>"+stars+"</strong>");
                } else o.parent().find(".ratStat").text(response)
            }
        })
    });

});
</script> 
</head>
<body>

<div id="stats">
    <div class="ratingBar">
        <div class="rat-ic" title=""></div>
        <div class="rat-st">86%</div>
        <div class="rating">
            <div class="ratZero"></div>
            <div class="ratDone"></div>
            <div class="ratHover"></div>
        </div>
        <div class="ratBlocks"></div>
        <div class="ratStat"></div>
    </div>
    <div class="ratingBar">
        <div class="rat-ic" title=""></div>
        <div class="rat-st">86%</div>
        <div class="rating">
            <div class="ratZero"></div>
            <div class="ratDone"></div>
            <div class="ratHover"></div>
        </div>
        <div class="ratBlocks"></div>
        <div class="ratStat"></div>
    </div>
</div>

</body>
</html>

artsem · #7 (**permalink**) 23.07.2017, 23:45

Огромное спасибо, php всё норм обрабатывает.
Однако ругается в кансоле браузер гугл хром на что-то.
Uncaught TypeError: o.parent(...).find$ is not a function
at Object.success (id5548:454)
at l (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at T (jquery.min.js:2)
at XMLHttpRequest.r (jquery.min.js:2)
success @ id5548:454
l @ jquery.min.js:2
fireWith @ jquery.min.js:2
T @ jquery.min.js:2
r @ jquery.min.js:2

И выкидывает на эту строку:
o.parent().find$(".ratBlocks")

Если я правильно понял то знак $ здесь не нужен, так как без его ошибка больше не появлялась.
Ещё раз огромное Вам спасибо.

рони · #8 (**permalink**) 23.07.2017, 23:54

artsem,
jquery загружена выше?

artsem · #9 (**permalink**) 24.07.2017, 00:12

Сообщение от рони

artsem,
jquery загружена выше?

да 1.8.3 версия.

рони · #10 (**permalink**) 24.07.2017, 00:21

artsem,
уберите красное
o.parent().find$(".ratBlocks")

Форум

Справочник

Discord чат

Курсы javascript