onclick передать две переменные в php с помощью jquery (система голосования)
У меня есть система 5 звезд в html/smarty ниже
<ul class="star-rating" id="{$ID}">
<li><a href="#" class="one-star"></a></li>
<li><a href="#" class="two-stars"></a></li>
<li><a href="#" class="three-stars"></a></li>
<li><a href="#" class="four-stars"></a></li>
<li><a href="#" class="five-stars"></a></li>
</ul>
<div style="display:none;" id="ok">Vote submited</div>
<div style="display:none;" id="wrong">Wrong</div>
<div style="display:none;" id="loggedin">Log in to vote</div>
У блоков ul есть собственный идентификатор. Мне нужно передать звезду, которая была нажата, и получить ul id, затем эти данные нужно передать php и получить ответ, затем ответ должен исчезнуть. Я придумал немного базового кода ниже, но его нужно доработать и исправить. Был бы признателен, если кто-нибудь будет полезным?
$( ".star-rating" ).click(function() {
$.ajax({
type: "POST",
url: "js/ajax.php",
data: "id" + id, "score" + score,
success: function(pass) {
// all ok
if(pass == '1')
$("#ok").show();
// something went wrong
else if(pass == '2')
$("#wrong").show();
// you need to be logged in to vote
else if(pass == '3')
$("#loggedin").show();
}
});
});
2 ответа
Решение
Похоже, вы хотите связать с a
а не ul
:
$('ul.star-rating').on('click', 'a', function() { // jquery 1.7+
var score = this.className,
ul = $(this).closest('ul'),
id = ul[0].id;
$.ajax({
type: "POST",
url: "js/ajax.php",
data: {id: id, score: score}, // fixed formatting here
success: function(pass) {
// all ok
if(pass == '1')
$("#ok").show().delay(5000).fadeOut(); // here is one way to do a fade out
// something went wrong
else if(pass == '2')
$("#wrong").show();
// you need to be logged in to vote
else if(pass == '3')
$("#loggedin").show();
}
});
return false;
});
Обратите также внимание на задержку вашего обратного вызова в качестве одного из способов сделать затухание.
Очевидно, вам нужно получить удостоверение личности и оценку.
Идентификатор взят из UL и может быть получен так:
var id = $(this).closest('ul').attr('id')
Звездный рейтинг от класса, вам нужно получить все классы (если есть другие добавленные), и получить рейтинг.
var liClass = $(this).attr('class').split(' '), score;
$.each(liClass, function(i,v){
if(v.indexOf('-star') !== -1){
score = v;
return false;
}
});