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'
Może jakiś link do pomocy, czy może tak to zostawić... ?