class Button { constructor ($element) { this.$element = $element; this.coords = { x: 0, y: 0, w: 0, h: 0 } } } Button.prototype.setCoords_but = function(x, y, w, h) { this.coords = { x: x, y: y, w: w, h: h } this.$element.offset({ top: this.coords.x, left: this.coords.y }); this.$element.css({height: this.coords.h, width: this.coords.w}); } var button_proverka = new Button($('#proverka')); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <button id="proverka">ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ°</button> <button id="delete">ΠžΡ‡ΠΈΡΡ‚ΠΈΡ‚ΡŒ</button> <button id="table_ist" >ΠŸΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ</button> </body>

The question is: is it possible to describe the class in a separate file and call it in another file? If so, then how! and the following: how you can change the style of the button when you hover the mouse and pressing the button (this should be described in the class)

    1 answer 1

    Is it possible to describe a class in a separate file and call it in another file?

    Yes, perhaps, at the same time, the file with the class should be connected before the file with its call. If you are concatenating files into one, the code with the class should be higher as a result, since his ad does not pop up.

    how you can change the style of the button when you hover the mouse and pressing the button (all this should be described in the class)

    If you don’t want / can’t do this through CSS, hang mouse event handlers on the button:

     class Button { constructor($element) { this.$element = $element; this.$element.addEventListener('mouseover', this.onMouseover); this.$element.addEventListener('mouseout', this.onMouseout); this.$element.addEventListener('click', this.onClick); } ... onMouseover(event) { /*ΠΊΠΎΠ΄ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ*/ } onMouseout(event) { /*ΠΊΠΎΠ΄ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ*/ } onClick(event) { /*ΠΊΠΎΠ΄ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ*/ } ... }

    ps It is not necessary to hang handlers in the constructor. You can put them in a separate function and call it when it is more convenient for you.

    • everything is clear, thanks for the help - svetlana2694
    • @ svetlana2694 if you are given a comprehensive answer, mark it as true - Vasily Barbashev