Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript]Pozycjonowanie elementów DOM, Problem z ustawianiem kolejnych elementów względem rodzica
rozny
post
Post #1





Grupa: Zarejestrowani
Postów: 116
Pomógł: 0
Dołączył: 14.01.2004
Skąd: Zielona Góra

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


Witam,

popełniłem skrypt do tworzenia kotwic na obrazie. Zasada działania jest taka, że klikając w dowolne miejsce na obrazie w klikniętym miejscu tworzony jest link i jednocześnie dwa inputy z koordynatami położenia kotwicy na obrazku. Można tworzyć dowolną ilość linków na zdjęciu. Niestety w tej chwili działa to tak, że pierwsza kotwica pozycjonowana jest prawidłowo, natomiast kolejne pozycjonują się względem ostatnio dodanego elementu. Niestety nie znam jQuery na tyle żeby wydedukować dlaczego tak się dzieje. Może ktoś mi zasugeruje gdzie jest błąd logiczny w moim skrypcie.

  1. $(function() {
  2.  
  3. $('#picture_container img').click(function(e){
  4.  
  5. var offset = $(this).offset();
  6. var x = e.pageX-$(this).offset().left;
  7. var y = e.pageY-$(this).offset().top;
  8. var new_anchor = $("<a>");
  9. var new_input_x = $("<input>");
  10. var new_input_y = $("<input>");
  11. var new_label = $("<label>");
  12. var new_id = x^2 + y;
  13.  
  14. new_anchor.attr("href", "#");
  15. new_anchor.attr("class", "anchor");
  16. new_anchor.css("margin-left", x);
  17. new_anchor.css("margin-top", y);
  18. new_anchor.html("+");
  19.  
  20. new_input_x.attr("type", "text");
  21. new_input_x.attr("name", "coor_" + x);
  22. new_input_x.attr("value", x);
  23.  
  24. new_input_y.attr("type", "text");
  25. new_input_y.attr("name", "coor_" + y);
  26. new_input_y.attr("value", y);
  27.  
  28. new_label.attr("id", new_id);
  29. new_label.append(new_input_x);
  30. new_label.append(new_input_y);
  31.  
  32. new_anchor.click(function() {
  33.  
  34. $(this).remove();
  35. $("label[id="+ new_id + "]").remove();
  36.  
  37. }
  38.  
  39. );
  40.  
  41. $('#picture_container').append(new_anchor);
  42. $('#picture_container').append(new_label);
  43.  
  44. });
  45.  
  46. });
  47.  
  48. $(function() {
  49.  
  50. $('#picture_container a').click(function(){
  51.  
  52. $(this).remove();
  53. return false;
  54.  
  55. });
  56.  
  57. });


Będę wdzięczny za podpowiedź.

Pozdrawiam
Go to the top of the page
+Quote Post

Posty w temacie


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

 



RSS Aktualny czas: 15.09.2025 - 06:10