Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Rada czy można skrócić kod, Kod z 3 funkcji w jednej?
kopara
post 2.09.2017, 14:47:39
Post #1





Grupa: Zarejestrowani
Postów: 1
Pomógł: 0
Dołączył: 2.09.2017

Ostrzeżenie: (0%)
-----


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.
  1. $(function() {
  2. var state = $('div#likeIt').attr('class'); // We get the class attribut of div="likeIt"
  3. if (state == "like_heart") { // If the class="like_heart"
  4. $('div#likeIt a').attr('title', 'Like this page'); // We add a title="Like this page" to the <a href="">...
  5. $('#box').text('Like'); // We add a "Like" text inside <div="box"></div>
  6. } else { // If the class="like_heart_off"
  7. $('div#likeIt a').attr('title', 'Unlike this page'); // We add a title="Unlike this page" to the <a href="">...
  8. $('#box').text('You like it'); // We add a "You like it" text inside <div="box"></div>
  9. }
  10.  
  11. $('div#likeIt').on('click', function buttonLike(event) { // When click on the icon
  12. $(event.target).off("click", buttonLike); // Disable click event
  13. $("#box").html('<img src="/design/loader-small.gif" alt="" />'); // Display a processing icon
  14. var relData = $.parseJSON($(this).attr('rel')); // Get Json from rel attribute: the userId and the pageId
  15.  
  16. var data = {'userId': relData.userId, 'pageId': relData.pageId}; // Create the data which will be send via Ajax
  17.  
  18. $.ajax({ // JQuery Ajax
  19. type: 'POST',
  20. url: '/ajax/tuto-like-page.php', // URL to the PHP file which will insert new value in the database
  21. data: data, // We send the data string
  22. timeout: 3000,
  23. success: function(data) {
  24. $('div#likeIt').attr('class', data); // Depending of the data string returned (like_heart OR like_heart_off)...
  25. if (data == "like_heart") {
  26. $('div#likeIt a').attr('title', 'Like this page'); // We change values for the <a title="">
  27. $('#box').text('Like'); // and for the <div id="box">
  28. } else {
  29. $('div#likeIt a').attr('title', 'Unlike this page'); // Same
  30. $('#box').text('You like it'); // Same
  31. }
  32. },
  33. error: function() {
  34. $('#box').text('Problem');
  35. }
  36. });
  37.  
  38. $(event.target).on("click", buttonLike); // Click event is allowed again
  39.  
  40. return false;
  41. });
  42. });

Mój przerobiony kod, który działa, ale zastanawiam się czy można to zrobić krócej w jeden funkcji

  1. $(function() {
  2. var state = $('div#likeIt').attr('class'); // We get the class attribut of div="likeIt"
  3. if (state == "like_heart") { // If the class="like_heart"
  4. $('div#likeIt a').attr('title', 'Like this page'); // We add a title="Like this page" to the <a href="">...
  5. $('#box').text('Like'); // We add a "Like" text inside <div="box"></div>
  6. } else { // If the class="like_heart_off"
  7. $('div#likeIt a').attr('title', 'Unlike this page'); // We add a title="Unlike this page" to the <a href="">...
  8. $('#box').text('You like it'); // We add a "You like it" text inside <div="box"></div>
  9. }
  10.  
  11. $('div#likeIt').on('click', function buttonLike(event) { // When click on the icon
  12. $(event.target).off("click", buttonLike); // Disable click event
  13. $("#box").html('<img src="/design/loader-small.gif" alt="" />'); // Display a processing icon
  14. var relData = $.parseJSON($(this).attr('rel')); // Get Json from rel attribute: the userId and the pageId
  15.  
  16. var data = {'userId': relData.userId, 'pageId': relData.pageId, 'typ': relData.typ}; // Create the data which will be send via Ajax
  17.  
  18. $.ajax({ // JQuery Ajax
  19. type: 'POST',
  20. url: '/ajax/tuto-like-page.php', // URL to the PHP file which will insert new value in the database
  21. data: data, // We send the data string
  22. timeout: 3000,
  23. success: function(data) {
  24. $('div#likeIt').attr('class', data); // Depending of the data string returned (like_heart OR like_heart_off)...
  25. if (data == "like_heart") {
  26. $('div#likeIt a').attr('title', 'Like this page'); // We change values for the <a title="">
  27. $('#box').text('Like'); // and for the <div id="box">
  28. } else {
  29. $('div#likeIt a').attr('title', 'Unlike this page'); // Same
  30. $('#box').text('You like it'); // Same
  31. }
  32. },
  33. error: function() {
  34. $('#box').text('Problem');
  35. }
  36. });
  37.  
  38. $(event.target).on("click", buttonLike); // Click event is allowed again
  39.  
  40. return false;
  41. });
  42. });
  43.  
  44.  
  45.  
  46. $(function() {
  47. var state = $('div#glupie').attr('class'); // We get the class attribut of div="likeIt"
  48. if (state == "like_heart") { // If the class="like_heart"
  49. $('div#glupie a').attr('title', 'Like this page'); // We add a title="Like this page" to the <a href="">...
  50. $('#boxglupie').text('Like'); // We add a "Like" text inside <div="box"></div>
  51. } else { // If the class="like_heart_off"
  52. $('div#glupie a').attr('title', 'Unlike this page'); // We add a title="Unlike this page" to the <a href="">...
  53. $('#boxglupie').text('You like it'); // We add a "You like it" text inside <div="box"></div>
  54. }
  55.  
  56. $('div#glupie').on('click', function buttonLike(event) { // When click on the icon
  57. $(event.target).off("click", buttonLike); // Disable click event
  58. $("#boxglupie").html('<img src="/design/loader-small.gif" alt="" />'); // Display a processing icon
  59. var relData = $.parseJSON($(this).attr('rel')); // Get Json from rel attribute: the userId and the pageId
  60.  
  61. var data = {'userId': relData.userId, 'pageId': relData.pageId, 'typ': relData.typ}; // Create the data which will be send via Ajax
  62.  
  63. $.ajax({ // JQuery Ajax
  64. type: 'POST',
  65. url: '/ajax/tuto-like-page.php', // URL to the PHP file which will insert new value in the database
  66. data: data, // We send the data string
  67. timeout: 3000,
  68. success: function(data) {
  69. $('div#glupie').attr('class', data); // Depending of the data string returned (like_heart OR like_heart_off)...
  70. if (data == "like_heart") {
  71. $('div#glupie a').attr('title', 'Like this page'); // We change values for the <a title="">
  72. $('#boxglupie').text('Like'); // and for the <div id="box">
  73. } else {
  74. $('div#glupie a').attr('title', 'Unlike this page'); // Same
  75. $('#boxglupie').text('You like it'); // Same
  76. }
  77. },
  78. error: function() {
  79. $('#boxglupie').text('Problem');
  80. }
  81. });
  82.  
  83. $(event.target).on("click", buttonLike); // Click event is allowed again
  84.  
  85. return false;
  86. });
  87. });
  88.  
  89. $(function() {
  90. var state = $('div#interesujace').attr('class'); // We get the class attribut of div="likeIt"
  91. if (state == "like_heart") { // If the class="like_heart"
  92. $('div#interesujace a').attr('title', 'Like this page'); // We add a title="Like this page" to the <a href="">...
  93. $('#boxinteresujace').text('Like'); // We add a "Like" text inside <div="box"></div>
  94. } else { // If the class="like_heart_off"
  95. $('div#interesujace a').attr('title', 'Unlike this page'); // We add a title="Unlike this page" to the <a href="">...
  96. $('#boxinteresujace').text('You like it'); // We add a "You like it" text inside <div="box"></div>
  97. }
  98.  
  99. $('div#interesujace').on('click', function buttonLike(event) { // When click on the icon
  100. $(event.target).off("click", buttonLike); // Disable click event
  101. $("#box").html('<img src="/design/loader-small.gif" alt="" />'); // Display a processing icon
  102. var relData = $.parseJSON($(this).attr('rel')); // Get Json from rel attribute: the userId and the pageId
  103.  
  104. var data = {'userId': relData.userId, 'pageId': relData.pageId, 'typ': relData.typ}; // Create the data which will be send via Ajax
  105.  
  106. $.ajax({ // JQuery Ajax
  107. type: 'POST',
  108. url: '/ajax/tuto-like-page.php', // URL to the PHP file which will insert new value in the database
  109. data: data, // We send the data string
  110. timeout: 3000,
  111. success: function(data) {
  112. $('div#interesujace').attr('class', data); // Depending of the data string returned (like_heart OR like_heart_off)...
  113. 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'
  1. <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ć... ?
Go to the top of the page
+Quote Post
viking
post 3.09.2017, 14:57:58
Post #2





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


Natchnąłeś mnie do napisania artykułu: https://prophp.pl/article/27/system_reakcji...%2C_mysql_i_php


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.03.2024 - 02:25