how to use the class to specify the coordinates of the buttons ( ООП ) using the jQuery library. may have any examples

  • what is "(OOP)"? - Igor
  • object-oriented programming - svetlana2694
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

2 answers 2

HTML:

 $("#sq").click(function() { $(this).offset({ top: 80, left: 50 }); }); 
 #sq { background: #ffe620; width: 40px; height: 40px; text-align: center; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <p>Клик по квадрату меняет его координаты</p> <div id="sq"></div> </div>

Js:

 $("#sq").click(function () { $(this).offset({top:80, left:50}); });

Source: ruseller.com/jquery.php?id=55

  • Why without OOP? - Igor
  • @Igor, why not oop? :-) jQuery object returns, this object, click object method, all objects around :-) It is obvious that there is an explicit orientation to objects :) - Grundy

Well ООП so ООП

 function Button($el) { this.$el = $el; this.coords = { x: 0, y: 0 } } Button.prototype.setCoords = function(x, y) { this.coords = { x: x, y: y } } Button.prototype.update = function() { this.$el.offset({ top: this.coords.x, left: this.coords.y }); } var $buttonEl = $('#btn'); var buttonInstance = new Button($buttonEl); function moveButton() { buttonInstance.setCoords(50, 100); buttonInstance.update() } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onClick="moveButton()" id="btn">Передвинуть меня</button>

  • But why an element in the class of a button? :) - Grundy
  • @Grundy, in this case, each instance belongs to one DOM element - ThisMan