如何將變量傳遞給jQuery函數？

Question

我想制作一個表格，您可以使用按鈕（使用jQuery）隱藏（切換）不必要的行。 我已經開始在頁面上工作，但是除非我可以重用jQuery函數，否則我將不得不為每個按鈕編寫一個函數，這可能要花費數十倍。 如何將變量傳遞給函數，以便可以對所有按鈕使用相同的函數？

<!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>

Answer 1

如果您控制HTML（看起來像您所做的那樣），則有很多方法可以解決此問題。 這個問題的一般答案是您不將信息傳遞給事件處理程序。 您可以在事件處理程序中使用this值，該事件處理程序指向clicked-on按鈕，然后確定對該給定的點擊操作哪個參數。

一種選擇是向按鈕添加一個數據屬性，告訴它要切換哪個div，然后在單擊處理程序中，從單擊的按鈕中獲取數據屬性並切換該項目。

資料屬性

<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>

普通集裝箱

您也可以將它們放在一個公共容器中，並且僅使用這樣的類名：

<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>

支配位置

或者，您可以保留當前的HTML並嚴格定位在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>

就我個人而言，我更喜歡第二種選擇（使用通用容器），因為它非常健壯並且僅使用類名，因此您不必使ID值唯一或維護它們，並且代碼可以自動使用其中的許多塊。 只要這兩個項目（按鈕和食品項目）保留在容器中，即使對HTML布局進行了一些修改，代碼也不必更改。

第一個選項要求您維護id值。 第二個選項要求您將DOM位置保持在按鈕和食品之間。

Answer 2

本示例使用自定義data-hide屬性定義要隱藏的元素。 還要注意，單擊綁定到class="button" =綁定到每個帶有class button的元素，而不綁定到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>

如何將變量傳遞給jQuery函數？

問題描述

2 個解決方案

解決方案1
2 已采納 2014-03-08 23:04:31

解決方案2
0 2014-03-08 23:11:22

如何將變量傳遞給jQuery函數？

問題描述

2 個解決方案

解決方案1 2 已采納 2014-03-08 23:04:31

解決方案2 0 2014-03-08 23:11:22

解決方案1
2 已采納 2014-03-08 23:04:31

解決方案2
0 2014-03-08 23:11:22