There is such a php code

<?php $data = parse_ini_file("likes.ini"); // Парсим INI-файл for($id=1; $id<4;$id++){ $likes = $data[$id]; // Получаем количество лайков у статьи ?> <div id="like" data-id="<?=$id?>"> <?=$likes?> </div> <?php }?>

and js

  <script type="text/javascript"> $(document).ready(function () { $("#like").bind("click", function (event) { /*if (get_cookie("VoiceLook") != "Yes") {*/ $.ajax({ url: "like.php", type: "POST", data: ("id=" + $("#like").attr("data-id")), dataType: "text", success: function (result) { if (result) { $("#like").text(Number($("#like").text()) + 1); } else alert("Error"); } }); /*document.cookie = "VoiceLook=Yes"; } else{ alert("Вы уже голосовали!"); }*/ }); }); function get_cookie(cookie_name) { var results = document.cookie.match('(^|;) ?' + cookie_name + '=([^;]*)(;|$)'); if (results) return (unescape(results[2])); else return null; } </script>

That is, the page displays several divs with the same id when you click on which the number should increase by +1. (this is a likes system with writing to a file via like.php). But it turns out that the file like.php all the time is passed only id = 1 (first diva) and it turns out that you can only increase by 1 div. How can I fix this?

As I understand the problem in js, it cannot correctly understand which id I click in connection with which it constantly sends id = 1.

  • id must be unique. - user220409
  • From html courses I read it. How then do? Do not write the same 30 functions for 30 id. - Maxim
  • @ Maksim Vadim Leshkevich answered you. Use context when sending data. - A. Gusev

2 answers 2

The ID should be unique, only once on the page, so when you click, you have the first element selected с id="like" on the page, add to your element class="like"

 <?php $data = parse_ini_file("likes.ini"); // Парсим INI-файл for($id=1; $id<4;$id++){ $likes = $data[$id]; // Получаем количество лайков у статьи ?> <div class="like" id="like" data-id="<?=$id?>"> <?=$likes?> </div> <?php } ?>

And in js, handle the event of clicking on an element with a class like

 <script type="text/javascript"> $(document).ready(function () { $(".like").bind("click", function (event) { /*if (get_cookie("VoiceLook") != "Yes") {*/ var that = $(this); $.ajax({ url: "like.php", type: "POST", data: ("id=" + that.attr("data-id")), dataType: "text", success: function (result) { if (result) { that.text(Number(that.text()) + 1); } else alert("Error"); } }); /*document.cookie = "VoiceLook=Yes"; } else{ alert("Вы уже голосовали!"); }*/ }); }); function get_cookie(cookie_name) { var results = document.cookie.match('(^|;) ?' + cookie_name + '=([^;]*)(;|$)'); if (results) return (unescape(results[2])); else return null; } </script>
  • That's right. Thank you very much! var that = $ (this) allows you to work with the class we clicked on? - Maxim
  • In general, $(this) selects the element with which the event happened, in this situation, click , and var that = $(this) , we simply $(this) assign it to a variable, so that it can be used in other places - Vadim Leshkevich

You cannot use several elements with the same id on the same page (as you did for id="like" ). In your case, $("#like") will always return the first element.
Use class='like' instead of id