How do I pass variables to a jQuery function?

Question

I would like to make a form where the you could hide (toggle) unnecessary lines using buttons (with jQuery). I have started working on a page but unless I can reuse the jQuery function I will have to write one function for every button which might be tens of times. How do I pass a variable to the function so that I can use the same function for all buttons?

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>
  $(document).ready(function(){
    $("#button1").click(function(){
      $("#para1").toggle();
    });
  });
</script>

<script>
  $(document).ready(function(){
    $("#button2").click(function(){
      $("#para2").toggle();
    });
  });
</script>

</head>
<body>


<button id="button1">Meat</button><br>
<div id="para1">Meat<br>
More meat</div>

<button id="button2">Bread</button><br>
<div id="para2">Bread<br>
More bread</div>

</body>
</html>

jfriend00 · Accepted Answer · 2014-03-08 23:28:47Z

If you control the HTML (which it looks like you do), there are lots of ways to solve this. The general answer to your question is that you don't to pass info to the event handler. You can use the this value in the event handler that points to the clicked-on button to then figure out which para to operate on for that given click.

One option would be to add a data attribute to the button that tells it which div to toggle and then, in the click handler, fetch the data attribute from the clicked on button and toggle that item.

Data Attribute

<button class="buttonToggle" data-para="para1">Meat</button><br>
<div id="para1">Meat<br>
More meat</div>

<button class="buttonToggle" data-para="para2">Bread</button><br>
<div id="para2">Bread<br>
More bread</div>

<script>
  $(document).ready(function(){
    $(".buttonToggle").click(function(){
      var id = $(this).data("para");
      $("#" + id).toggle();
    });
  });
</script>

Common Container

You could also put both in a common container and use only class names like this:

<div class="toggleContainer">
<button class="buttonToggle">Meat</button><br>
<div class="foodItem">Meat<br>
More meat</div>
</div>

<div class="toggleContainer">
<button class="buttonToggle">Bread</button><br>
<div class="foodItem">Bread<br>
More bread</div>
</div>

<script>
  $(document).ready(function(){
    $(".buttonToggle").click(function(){
      $(this).closest(".toggleContainer").find(".foodItem").toggle();
    });
  });
</script>

Dom Position

Or, you could keep with your current HTML and go strictly be position in the DOM:

<button id="button1">Meat</button><br>
<div id="para1">Meat<br>
More meat</div>

<button id="button2">Bread</button><br>
<div id="para2">Bread<br>
More bread</div>

<script>
  $(document).ready(function(){
    $("#button1, #button2").click(function(){
      $(this).next().next().toggle();
    });
  });
</script>

Personally, I prefer the second option (with the common container) because it's very robust and uses only class names so you don't have to make ID values unique or maintain them and the code automatically works for however many of these blocks you have. As long as the two items (button and food item) stay in the container, the code doesn't have to change even if the HTML layout gets modified a bit.

The first option requires you to maintain id values. The second option requires you to keep the DOM position right between button and food item.

Jens A. Koch · Accepted Answer · 2014-03-08 23:11:22Z

This example uses a custom data-hide attribute to define the element to hide. Also notice that the click is bound to the class="button" = to every element with class button and not to the id.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>
  $(document).ready(function(){
    $(".button").click(function(){
      var elementToHide = $(this).data("hide");
      $("#"+elementToHide).toggle();
    });
  });
</script>

</head>
<body>


<button class="button" id="button1" data-hide="para1">Meat</button>
<br>
<div id="para1">Meat<br>
More meat
</div>

<button class="button" id="button2" data-hide="para2">Bread</button>
<br>
<div id="para2">Bread<br>
More bread
</div>

Collectives™ on Stack Overflow

How do I pass variables to a jQuery function?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related