Как сократить javascript?
Здравствуйте, есть голосовалка по 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>
|
обернуть функцией и засунуть в цикл, счетчик передать в функцию аргументом.
|
можно пример? а то с моими познаниями функций в js ,беда.
|
Цитата:
|
Цитата:
|
<!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>
|
Огромное спасибо, 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") Если я правильно понял то знак $ здесь не нужен, так как без его ошибка больше не появлялась. Ещё раз огромное Вам спасибо. |
artsem,
jquery загружена выше? |
Цитата:
|
artsem,
уберите красное o.parent().find$(".ratBlocks") |
| Часовой пояс GMT +3, время: 18:52. |