Witam,
Mam po raz pierwszy przyjemność edytować coś w js i proszę o radę. Wykorzystałem takie gotowe rozwiązanie systemu polubień
http://www.tipocode.com/jquery/jquery-facebook-like-system. Prócz gotowego 'like' dodałem jeszcze coś w rodzaju 'głupie' i 'interesujące' cały php bez problemu przerobiłem jak chciałem, ale w js z powodu braku doświadczenia po prostu skopiowałem cały kod dwa razy i pozmieniałem nazwy ID z div. Moje pytanie dotyczy tego czy można to zrobić lepiej np wszystko zawrzeć w jednej funkcji. Metodą prób i błędów doszedłem, że atrybuty pobiera we fragmencie po
$('div#likeIt').on('click', function buttonLike(event) { // When click on the icon
i niestety już wcześniej musi być określone id div. Próbowałem wszystkimi trzem elementom nadać to samo id, ale rożne class, ale coś mi nie zadziałało.
$(function() {
var state = $('div#likeIt').attr('class'); // We get the class attribut of div="likeIt"
if (state == "like_heart") { // If the class="like_heart"
$('div#likeIt a').attr('title', 'Like this page'); // We add a title="Like this page" to the <a href="">...
$('#box').text('Like'); // We add a "Like" text inside <div="box"></div>
} else { // If the class="like_heart_off"
$('div#likeIt a').attr('title', 'Unlike this page'); // We add a title="Unlike this page" to the <a href="">...
$('#box').text('You like it'); // We add a "You like it" text inside <div="box"></div>
}
$('div#likeIt').on('click', function buttonLike(event) { // When click on the icon
$(event.target).off("click", buttonLike); // Disable click event
$("#box").html('<img src="/design/loader-small.gif" alt="" />'); // Display a processing icon
var relData = $.parseJSON($(this).attr('rel')); // Get Json from rel attribute: the userId and the pageId
var data = {'userId': relData.userId, 'pageId': relData.pageId}; // Create the data which will be send via Ajax
$.ajax({ // JQuery Ajax
type: 'POST',
url: '/ajax/tuto-like-page.php', // URL to the PHP file which will insert new value in the database
data: data, // We send the data string
timeout: 3000,
success: function(data) {
$('div#likeIt').attr('class', data); // Depending of the data string returned (like_heart OR like_heart_off)...
if (data == "like_heart") {
$('div#likeIt a').attr('title', 'Like this page'); // We change values for the <a title="">
$('#box').text('Like'); // and for the <div id="box">
} else {
$('div#likeIt a').attr('title', 'Unlike this page'); // Same
$('#box').text('You like it'); // Same
}
},
error: function() {
$('#box').text('Problem');
}
});
$(event.target).on("click", buttonLike); // Click event is allowed again
return false;
});
});
Mój przerobiony kod, który działa, ale zastanawiam się czy można to zrobić krócej w jeden funkcji
$(function() {
var state = $('div#likeIt').attr('class'); // We get the class attribut of div="likeIt"
if (state == "like_heart") { // If the class="like_heart"
$('div#likeIt a').attr('title', 'Like this page'); // We add a title="Like this page" to the <a href="">...
$('#box').text('Like'); // We add a "Like" text inside <div="box"></div>
} else { // If the class="like_heart_off"
$('div#likeIt a').attr('title', 'Unlike this page'); // We add a title="Unlike this page" to the <a href="">...
$('#box').text('You like it'); // We add a "You like it" text inside <div="box"></div>
}
$('div#likeIt').on('click', function buttonLike(event) { // When click on the icon
$(event.target).off("click", buttonLike); // Disable click event
$("#box").html('<img src="/design/loader-small.gif" alt="" />'); // Display a processing icon
var relData = $.parseJSON($(this).attr('rel')); // Get Json from rel attribute: the userId and the pageId
var data = {'userId': relData.userId, 'pageId': relData.pageId, 'typ': relData.typ}; // Create the data which will be send via Ajax
$.ajax({ // JQuery Ajax
type: 'POST',
url: '/ajax/tuto-like-page.php', // URL to the PHP file which will insert new value in the database
data: data, // We send the data string
timeout: 3000,
success: function(data) {
$('div#likeIt').attr('class', data); // Depending of the data string returned (like_heart OR like_heart_off)...
if (data == "like_heart") {
$('div#likeIt a').attr('title', 'Like this page'); // We change values for the <a title="">
$('#box').text('Like'); // and for the <div id="box">
} else {
$('div#likeIt a').attr('title', 'Unlike this page'); // Same
$('#box').text('You like it'); // Same
}
},
error: function() {
$('#box').text('Problem');
}
});
$(event.target).on("click", buttonLike); // Click event is allowed again
return false;
});
});
$(function() {
var state = $('div#glupie').attr('class'); // We get the class attribut of div="likeIt"
if (state == "like_heart") { // If the class="like_heart"
$('div#glupie a').attr('title', 'Like this page'); // We add a title="Like this page" to the <a href="">...
$('#boxglupie').text('Like'); // We add a "Like" text inside <div="box"></div>
} else { // If the class="like_heart_off"
$('div#glupie a').attr('title', 'Unlike this page'); // We add a title="Unlike this page" to the <a href="">...
$('#boxglupie').text('You like it'); // We add a "You like it" text inside <div="box"></div>
}
$('div#glupie').on('click', function buttonLike(event) { // When click on the icon
$(event.target).off("click", buttonLike); // Disable click event
$("#boxglupie").html('<img src="/design/loader-small.gif" alt="" />'); // Display a processing icon
var relData = $.parseJSON($(this).attr('rel')); // Get Json from rel attribute: the userId and the pageId
var data = {'userId': relData.userId, 'pageId': relData.pageId, 'typ': relData.typ}; // Create the data which will be send via Ajax
$.ajax({ // JQuery Ajax
type: 'POST',
url: '/ajax/tuto-like-page.php', // URL to the PHP file which will insert new value in the database
data: data, // We send the data string
timeout: 3000,
success: function(data) {
$('div#glupie').attr('class', data); // Depending of the data string returned (like_heart OR like_heart_off)...
if (data == "like_heart") {
$('div#glupie a').attr('title', 'Like this page'); // We change values for the <a title="">
$('#boxglupie').text('Like'); // and for the <div id="box">
} else {
$('div#glupie a').attr('title', 'Unlike this page'); // Same
$('#boxglupie').text('You like it'); // Same
}
},
error: function() {
$('#boxglupie').text('Problem');
}
});
$(event.target).on("click", buttonLike); // Click event is allowed again
return false;
});
});
$(function() {
var state = $('div#interesujace').attr('class'); // We get the class attribut of div="likeIt"
if (state == "like_heart") { // If the class="like_heart"
$('div#interesujace a').attr('title', 'Like this page'); // We add a title="Like this page" to the <a href="">...
$('#boxinteresujace').text('Like'); // We add a "Like" text inside <div="box"></div>
} else { // If the class="like_heart_off"
$('div#interesujace a').attr('title', 'Unlike this page'); // We add a title="Unlike this page" to the <a href="">...
$('#boxinteresujace').text('You like it'); // We add a "You like it" text inside <div="box"></div>
}
$('div#interesujace').on('click', function buttonLike(event) { // When click on the icon
$(event.target).off("click", buttonLike); // Disable click event
$("#box").html('<img src="/design/loader-small.gif" alt="" />'); // Display a processing icon
var relData = $.parseJSON($(this).attr('rel')); // Get Json from rel attribute: the userId and the pageId
var data = {'userId': relData.userId, 'pageId': relData.pageId, 'typ': relData.typ}; // Create the data which will be send via Ajax
$.ajax({ // JQuery Ajax
type: 'POST',
url: '/ajax/tuto-like-page.php', // URL to the PHP file which will insert new value in the database
data: data, // We send the data string
timeout: 3000,
success: function(data) {
$('div#interesujace').attr('class', data); // Depending of the data string returned (like_heart OR like_heart_off)...
SKRÓCIŁEM BO POST BYŁ ZBYT DŁUGI
Dodałem również nowy parametr 'typ' dzięki czemu później wiadomo jaki wykonać kod , odpowiedzialny za 'like', 'głupie' lub 'interesujące'
<td><div class="
<?php if ($likeIt['like_it']==0
|| empty($likeIt)) echo 'like_heart'; else echo 'like_heart_off'; ?>" id="likeIt" rel='{"userId":
<?php echo $userId; ?>,"pageId":
<?php echo $pageId; ?>}'><a href="#"></a></div></td>
Może jakiś link do pomocy, czy może tak to zostawić... ?