Question

我有几个以整数值结尾的表单字段。我想找到那个整数并用它来查找其他表单字段的值。现在，当使用整数创建jQuery选择器时，选择器在尝试捕获值时会生成undefined。

表格代码：

<div class="row">
    <div class="col-xs-2"><input type="checkbox" name="fee_hidden8" value="8" id="fee_hidden8" class="btoggle" data-toggle="toggle" data-on="<i class='glyphicons glyphicons-eye-close'></i> Hidden" data-off="<i class='glyphicons glyphicons-eye-open'></i> Visible" data-onstyle="danger" data-offstyle="success" data-size="small" >
     <br><span class="bg-warning">Waiting for Input</span></div>
    <div class="col-xs-3"><a href="account_edit.cfm?fc=8&yr=2016&tab=1"><h4>New Leagues</h4></a><br />Season: 2016</div>
    <div class="col-xs-2"><input type="text" id="fee_open_date8" name="fee_open_date8" class="pickdate btoggle form-control" value=""></div>
    <div class="col-xs-2"><input type="text" id="fee_close_date8" name="fee_close_date8" class="pickdate btoggle form-control" value=""></div>
</div>
<div class="row">
    <div class="col-xs-2"><input type="checkbox" name="fee_hidden7" value="7" id="fee_hidden7" class="btoggle" data-toggle="toggle" data-on="<i class='glyphicons glyphicons-eye-close'></i> Hidden" data-off="<i class='glyphicons glyphicons-eye-open'></i> Visible" data-onstyle="danger" data-offstyle="success" data-size="small" >
     <br><span class="bg-warning">Waiting for Input</span></div>
    <div class="col-xs-3"><a href="account_edit.cfm?fc=7&yr=2016&tab=1"><h4>New Camps</h4></a><br />Season: 2016</div>
    <div class="col-xs-2"><input type="text" id="fee_open_date7" name="fee_open_date7" class="pickdate btoggle form-control" value=""></div>
    <div class="col-xs-2"><input type="text" id="fee_close_date7" name="fee_close_date7" class="pickdate btoggle form-control" value=""></div>
</div>

jQuery的：

$(function() {
    $('.btoggle').change(function() {
        var id = parseInt($(this).attr("id").match(/(\d+)$/)[0], 10)
        var id = id.toString();

        if($("fee_hidden" + id).prop('checked'))
        {var st = 'Yes'}
        else
        {var st = 'No'};

        var fx = $("fee_hidden" + id).val();
        var od = $("fee_open_date" + id).val(); 
        var cd = $("fee_close_date" + id).val(); 
        alert(st + " " + id + " " + fx + " " + od + " " + cd);

        $.post("tsafunctions.cfc", {
            method: 'visiblehidden',
            fc: fx,
            status: st,
            od: od,
            cd: cd
            });
    })
});

Answer 1

这有效：

  $(function() {
$('.btoggle').change(function() {
    var id = parseInt($(this).attr("id").match(/(\d+)$/)[0], 10);

    var st = $("#fee_hidden" + id).prop('checked') ? 'Yes' : 'No';
    var fx = $("#fee_hidden" + id).val();
    var od = $("#fee_open_date" + id).val();
    var cd = $("#fee_close_date" + id).val();

    console.log("st: ", st, " id: ", id, " fx: ", fx, " od: ", od, " cd: ", cd);

/**
    $.post("tsafunctions.cfc", {
        method: 'visiblehidden',
        fc: fx,
        status: st,
        od: od,
        cd: cd
        });
**/
})
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-xs-2"><input type="checkbox" name="fee_hidden8" value="8" id="fee_hidden8" class="btoggle" data-toggle="toggle" data-on="<i class='glyphicons glyphicons-eye-close'></i> Hidden" data-off="<i class='glyphicons glyphicons-eye-open'></i> Visible" data-onstyle="danger" data-offstyle="success" data-size="small" >
        <br>
        <span class="bg-warning">Waiting for Input</span>
    </div>
    <div class="col-xs-3">
        <a href="account_edit.cfm?fc=8&yr=2016&tab=1"><h4>New Leagues</h4></a>
        <br />Season: 2016
    </div>
    <div class="col-xs-2">
        <input type="text" id="fee_open_date8" name="fee_open_date8" class="pickdate btoggle form-control" value="">
    </div>
    <div class="col-xs-2">
        <input type="text" id="fee_close_date8" name="fee_close_date8" class="pickdate btoggle form-control" value="">
    </div>
</div>
<div class="row">
    <div class="col-xs-2">
        <input type="checkbox" name="fee_hidden7" value="7" id="fee_hidden7" class="btoggle" data-toggle="toggle" data-on="<i class='glyphicons glyphicons-eye-close'></i> Hidden" data-off="<i class='glyphicons glyphicons-eye-open'></i> Visible" data-onstyle="danger" data-offstyle="success" data-size="small" >
        <br>
        <span class="bg-warning">Waiting for Input</span>
    </div>
    <div class="col-xs-3">
        <a href="account_edit.cfm?fc=7&yr=2016&tab=1"><h4>New Camps</h4></a>
        <br />Season: 2016
    </div>
    <div class="col-xs-2">
        <input type="text" id="fee_open_date7" name="fee_open_date7" class="pickdate btoggle form-control" value="">
    </div>
    <div class="col-xs-2">
        <input type="text" id="fee_close_date7" name="fee_close_date7" class="pickdate btoggle form-control" value="">
    </div>
</div>

单击Run code snippet按钮进行测试。您可以点击Full page按钮查看整页，以便更轻松地查看正在发生的事情。控制台消息将记录在屏幕底部，以显示所有值都已正确检索。

变化是：

删除了多余的id变量
为jQuery选择器添加'＃'以按ID

除了这两个项目之外，没有太多错误，冗余的id变量可能实际上不是问题。

使用带有jquery的parseint来查找其他值

1 个答案: