Question

我在wordpress中有一个页面显示大约20个民意调查问题（使用WP-polls）。

一旦检查到答案，我正在使用代码段显示每个民意调查的提交按钮。事情是，有了这个片段，我必须复制粘贴它大约20次，因为我是某种循环。

这是我正在使用的当前代码

$(document).ready(function() {

var $submit = $("#btn-7").hide(),
    $cbs = $('input[name="poll_7"]').click(function() {
        $submit.toggle( $cbs.is(":checked") );
    });

});

$(document).ready(function() {

var $submit = $("#btn-6").hide(),
    $cbs = $('input[name="poll_6"]').click(function() {
        $submit.toggle( $cbs.is(":checked") );
    });

});

$(document).ready(function() {

var $submit = $("#btn-5").hide(),
    $cbs = $('input[name="poll_5"]').click(function() {
        $submit.toggle( $cbs.is(":checked") );
    });

});

您可以看到“btn_number”ID和“poll_number”的变化。这还有另外20个片段。我怎样才能让这种动态变化？

Answer 1

jQuery允许您使用通配符，例如：

var $submit = $("#btn-*").hide(),
    $cbs = $('input[name="poll_*"]').click(function() {
        $submit.toggle( $cbs.is(":checked") );
    });

编辑：我看到jquery不再支持通配符选择器（如上例所示），您可能需要查看：http://james.padolsey.com/javascript/regex-selector-for-jquery/这使您能够使用正则表达式为所有选择器定义选择器btn＆a;及其代码

Answer 2

您可以在ID和名称属性上使用starts with选择器来动态访问该号码。对于复选框，change事件比click事件更合适。

<强> Demo

$('[id^="btn-"]').hide();

$('input[name^="poll_"]').change(function(){
    var number = this.name.replace('poll_', '');
    $('#btn-' + number).toggle( $(this).is(":checked") );
});

最好使用data-*属性来链接按钮和复选框，或将它们嵌套在具有ID的元素中。从ID属性中解析数字并不是最干净的方法。

Answer 3

为了获得不同的按钮ID，您不必重复相同的代码20次。你可以让它充满活力。结帐这个简单的例子

＆＃13;

$("#submit").click(

   function()
    {
       
              for(i=1;i<=5;i++)
              {
                msg = $("#btn-"+i).val()
                
                alert(msg)
              }
    
    
    }


)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="button" id="btn-1" value="button1"> 
    <input type="button" id="btn-2" value="button2"> 
        <input type="button" id="btn-3" value="button3"> 
            <input type="button" id="btn-4" value="button4"> 
                <input type="button" id="btn-5" value="button5"> 
  
                    <p>
 <input type="button" value="submit" id="submit">

＆＃13;

Answer 4

$(document).ready(function(){

    for(var i=1;i<=20;i++){
        var submit = $("#btn-"+i).hide(),
            cbs    = $('input[name="poll_'+i+'"]').click(function(){
                        submit.toggle($this.is(":checked"));
                     });
    }

});

选中复选框时显示提交循环

4 个答案: