Suppose there is a function

$(document).ready(function(){ $('.myclass').click(function(){ } });

which hangs on blocks, say, with information on the product. How to pass a parameter to this function, for example, a product code? Previously, on pure js I wrote the onmouseclick = "" event on each block and from php I substituted the necessary parameter.

    2 answers 2

    You can assign a parameter as an attribute of the element, for example, data-parameter

     <div class="myclass" data-parameter="test parameter">contents</div>

    and then read it in jquery:

     $(document).ready(function(){ $('.myclass').click(function(){ console.log(this.getAttribute("data-parameter")); }); });
    • 3
      Or you can: console.log (this.data ('parametr)); - caravaneer
    • one
      When using jQuery, it is considered good practice to write $ (this) .param ('data-parameter'). - SoWa
    • 2
      @SoWa, the jquery object is already passed to the function, so you should not wrap it again in $ (). Yes, and .param () does a completely different thing; it converts an object into a suitable one for transmission via GET. jquery.page2page.ru/index.php5/... edit: the first item I made was wrong, it is not a jquery object that is passed. - oburejin
    • one
      It is considered good practice to use methods as intended. If we use [HTML5 Custom Data Attributes] ( w3.org/TR/2011/WD-html5-20110525/… ), then we work with the corresponding $ .data () . Plus comment @caravaneer. - iKuzko
    • Wow, excuse me, friends, I messed up with param, I apologize, there must be a prop - SoWa

    In jQuery, when we hang any event on an element almost very rarely we have to give parameters to the handler function. But all this is implemented in jQuery, it is called .data () Here is a simple example where we give the data parameters to the function of the click handler on the element.

     $(document).ready(function(){ $('.test_func').each(function(key, val){ $(val).click(function(event){ console.log($(this).data('param')); }); }); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test_func" data-param="test param 1">test content</div> <div class="test_func" data-param="test param 2">test content</div>

    In jQuery there is a function .data () and with it we took the attribute of the html tag which is written so data-param , here the main initial attribute name that we have to write so data- and the rest of the name that we in jQuery took the attribute value.

    • What to do if test_func several elements with the test_func class, and everyone should have their own param1 and param2 ? - Grundy
    • You can ask a question by points and give us a piece of code that you want to implement, and I will answer your question. - Raz Galstyan
    • I mean, your answer does not answer the question asked. Judging by the question, each element .myclass its own .myclass - product code, in your case - it is one for all - Grundy
    • @Grundy I missed one nuance, I will make an amendment in the answer, and so it is clear that there is already another question and not a duplicate of the question. - Raz Galstyan
    • and so it is clear that there is already another question and not a duplicate of the question - that is why I did not close the duplicate, and therefore it is strange to write the same answer to another question. - Grundy