Now there are several objects on the page that have a class .foo. When clicking on any of these objects, the #bar block changes its position.

$(function() { $('.foo').click(function(){ var foo_top = $(this).position().top; var foo_left = $(this).position().left; $('#bar').offset({top: foo_top + 10, left: foo_left + 10}); }); });

Because the code grows, I want to make the task of styles a separate function. What is the best way to do this?

  • What do you mean by "decoding"? - Rules
  • The design of this object on the page is the specification of its coordinates and dimensions. Not a very convenient word, but I didn’t think of it better. - Denis Khvorostin
  • one
    This is called JOB STYLE :) - Rules
  • Corrected, thanks. - Denis Khvorostin

2 answers 2

then so

 function setStyle(event){ var foo_top = $(this).position().top; var foo_left = $(this).position().left; $('#bar').offset({top: foo_top + event.data.top, left: foo_left + event.data.left}); } $(function() { $('.foo').on('click', {top: 10, left: 10}, setStyle); });

    So what ?:

     function setStyle(){ var foo_top = $(this).position().top; var foo_left = $(this).position().left; $('#bar').offset({top: foo_top + 10, left: foo_top + 10}); } $(function() { $('.foo').click(setStyle); }
    • The disadvantage of this is only in the impossibility of transferring the parameters of the function setStyle but this problem can be solved using the function wrapper ... - Rules
    • Does not take off . What am I doing wrong? - Denis Khvorostin
    • one
      because comrade The @Rules brackets in the answer are not delivered, but I just copied, and the line left: foo_top + 10 should look like this: left: foo_left + 10 - this is an error in your question. - Specter
    • @Spectre, corrected the error. I am wondering where the brackets are missing. - Denis Khvorostin
    • one
      ATTENTION!!! Spoiler - Specter