JQuery - 參數化調用

我有一系列應該顯示的輸入字段，如果它們對應的配對複選框被選中。JQuery - 參數化調用

我在這裏的問題是，複選框對應於一個inputfield。我是否必須將複選框編號解析爲函數參數，才能正確調用點擊函數？或者我如何解決這個問題。

在我的例子中，你可以看到我的第一個複選框有一個點擊函數，但我希望該函數是一般的，我只想解析cb編號，我怎麼能在jQuery中做到這一點？

這裏是我的代碼：

<script> 
     $(function() { 
      $("input.ui-spinner").spinner({ 
       min: 5, 
       max: 15000, 
       step: 5, 
       start: 100, 
       numberFormat: "d" 
      }); 
      $("#cb\\[1\\]").click(function() { 
       $("#cspinner\\[1\\]").val('0'); 
       $("#cspinner\\[1\\]").toggle(); 
      }); 
     }); 
</script> 
<ul class="checkbox"> 
    <li> 
    <input type="checkbox" id="cb[1]" name="cb[1]" value="pepperoni" /><label for="cb[1]">Pepperoni</label> 
    <input id="cspinner[1]" class="ui-spinner" style="display: none;" name="cspinner" size="5" value="0" readonly="readonly" /> 
</li> 
<li> 
    <input type="checkbox" id="cb[2]" name="cb[2]" value="sausage" /><label for="cb[2]">Sausage</label> 
    <input id="cspinner[2]" class="ui-spinner" style="display: none;" name="cspinner" size="5" value="0" readonly="readonly" /> 
</li> 
<li> 
    <input type="checkbox" id="cb[3]" name="cb[3]" value="mushrooms" /><label for="cb[3]">Mushrooms</label> 
    <input id="cspinner[3]" class="ui-spinner" style="display: none;" name="cspinner" size="5" value="0" readonly="readonly" /> 
</li> 
</ul>

來源

2013-07-01 codingjoe

是否真的有必要就每個chekbox不同的ID？怎麼樣有一個複選框的類，並按功能找到第二.sibling（） – Arxeiss

你可以試試這個 -

$("[id^='cb[']").click(function() { 
    var num = this.id.replace('cb[', '').replace(']', ''); 
    $("#cspinner\\[" + num + "\\]").val('0'); 
    $("#cspinner\\[" + num + "\\]").toggle(); 
});

演示------>http://jsfiddle.net/MG6Zj/

來源

2013-07-01 18:17:42

由於某種原因，我喜歡這種方法一點點。最大的原因是和兄弟姐妹在一起，我把我的雙人鎖在一起，就像婚姻一樣。這種方法更像是一種開放的關係。（不反映我在婚姻中的喜好）:) – codingjoe

$('input[id*="cb"]').click(function() { 
      $(this).siblings('input').val('0'); 
      $(this).siblings('input').toggle(); 
     });

您可以比您正在使用使用更多通用的選擇。

http://jsfiddle.net/zaacj/

來源

2013-07-01 18:18:05 bluetoft

爲什麼要搜索同胞元素兩次？我認爲這樣更好更快：'（this）.siblings（'input'）。val（'0'）。toggle（）;' – Arxeiss

我喜歡添加類，然後使用過渡功能.siblings（）來查找下一個輸入...

<script> 
    $(function() { 
     $("input.ui-spinner").spinner({ 
      min: 5, 
      max: 15000, 
      step: 5, 
      start: 100, 
      numberFormat: "d" 
     }); 
     $(".myCheck").click(function() { 
      $(this).siblings(".ui-spinner").val('0').toggle(); 
     }); 
    }); 
</script> 
<ul class="checkbox"> 
    <li> 
    <input type="checkbox" class="myCheck" name="cb[1]" value="pepperoni" /><label  for="cb[1]">Pepperoni</label> 
    <input class="ui-spinner" style="display: none;" name="cspinner" size="5" value="0" readonly="readonly" /> 
</li> 
<li> 
    <input type="checkbox" class="myCheck" name="cb[2]" value="sausage" /><label for="cb[2]">Sausage</label> 
    <input class="ui-spinner" style="display: none;" name="cspinner" size="5" value="0" readonly="readonly" /> 
</li> 
<li> 
    <input type="checkbox" class="myCheck" name="cb[3]" value="mushrooms" /><label for="cb[3]">Mushrooms</label> 
    <input class="ui-spinner" style="display: none;" name="cspinner" size="5" value="0" readonly="readonly" /> 
</li> 
</ul>

來源

2013-07-01 18:25:14 Arxeiss

JQuery - 參數化調用

回答

相關問題