-3

我认为我非常接近 - 但不完全在那里......简而言之：我试图显示表格的底部（步骤2），具体取决于表格顶部的输入字段中是否存在数据（步骤1）。我正在尝试通过 jQuery 使用 removeClass 来进行文档的初始加载和更改。

请注意：此处包含多个脚本 - 并非表明我缺乏经验，而是表明我一直在努力解决这个问题，这些是我的多次尝试...

http://jsfiddle.net/SUrU9/2/

<table>
<tr align="center">
    <td colspan="2">
        <hr>
    </td>
</tr>
<tr id="Step1ID">
    <td valign="middle">Step 1 Data:</td>
    <td valign="middle">
        <input type="text" id="Step1Data" name="Step1Data" size="8" maxlength="8" />
    </td>
</tr>
<tr align="center">
    <td colspan="2">
        <hr>
    </td>
</tr>
<tr id="Step2ID" class="hideS2">
    <td>Step2 Data:</td>
    <td>
        <input type="text" id="Step2Data" name="Step2Data" size="8" maxlength="8" />
    </td>
</tr>
<tr align="center">
    <td colspan="2">
        <hr>
    </td>
</tr>
</table>


$(document).ready(function () {
var Step1Data = $("#Step1Data").val();
if (Step1Data === '') {} else {
    $('tr').removeClass('hideS2');
}

$(document).on('change', '#Step1ID', function () {
    var Step1Data = $.trim(("#Step1Data").val());
    if (Step1Data === '') {} else {
        $('tr').removeClass('hideS2');
    }
});

$(body).on('change', '#Step1ID', function () {
    var Step1Data = $.trim(("#Step1Data").val());
    if (Step1Data === '') {} else {
        $('tr').removeClass('hideS2');
    }
});

$('#Step1ID').on('change', '#Step1Data', function () {
    var Step1Data = $.trim(("#Step1Data").val());
    if (Step1Data === '') {} else {
        $('tr').removeClass('hideS2');
    }
});

$("Step1Data").blur(function () {
    var Step1Data = $.trim(("#Step1Data").val());
    if (Step1Data === '') {} else {
        $('tr').removeClass('hideS2');
    }
});

$("Step1ID").focusout(function () {
    var Step1Data = $.trim(("#Step1Data").val());
    if (Step1Data === '') {} else {
        $('tr').removeClass('hideS2');
    }
});
});


 .hideS2 {
 display: none;
 }
4

3 回答 3

2

因此，您想检查 Step1Info 和 Step2Info 变量是否包含任何数据，以及它们是否显示了表格的下一部分？它不起作用的原因是 if 语句在文档准备好时运行。一旦用户实际填写了您想要检查数据的表单部分，jQuery 就不会被告知再次检查。我要做的是在用户将焦点更改到之前的步骤时删除隐藏的类，或者让他们做一些触发事件以删除类的事情。这是一些代码：

<table>
<tbody>
    <tr><td>Top Instruction</td></tr>
    <tr><td>Step1Info</td></tr>
    <tr id="Step2_id" class="hide"><td>Step2Info</td></tr>
    <tr id="Step3_id" class="hide"><td>Step3Info</td></tr>
    <tr><td>Bottom Instruction</td></tr>
</tbody> 
</table>

<script language="JavaScript" type="text/JavaScript">
$(document).ready(function(){
    $(document).on('focus', '#textbox1', function() {
        $("#Step2_id").removeClass("hide");
    });

    $(document).on('focus', '#textbox2', function() {
        $("#Step3_id").removeClass("hide");
    });
});
</script>

<style>
.hide {
    display:none;
}
</style>

如果您想等到用户实际将某些内容放入您可以使用的表单中：

$(document).on('change', '#textbox1', function() {
    $("#Step2_id").removeClass("hide");
});

我不得不冒昧地猜测一下您实际上是如何设置的。我希望这至少可以帮助您理解为什么事情不起作用。

于 2013-07-11T18:53:09.783 回答
0

由于我不确定您是如何获得变量的，所以我只是猜测。我在说明中添加了一些复选标记，以表明该步骤已完成。这是我的例子的小提琴：

http://jsfiddle.net/BBaaA/

jQuery :

$(document).ready(function () {
    $("#Step1_ck").click(function () {
        $("#Step2_id").toggleClass("hideS2");
    });

    $("#Step2_ck").click(function () {
        $("#Step3_id").toggleClass("hideS3");
    });
});

CSS：

.hideS2 {
    display: none;
}
.hideS3 {
    display: none;
}

HTML：

<table>
    <tr>
        <td>Top Instruction</td>
        <td></td>
    </tr>
    <tr id="Step1_id" class="hideS1">
        <td>Step1Info</td>
        <td>
            <input id="Step1_ck" type="checkbox">
            <td>
    </tr>
    <tr id="Step2_id" class="hideS2">
        <td>Step2Info</td>
        <td>
            <input id="Step2_ck" type="checkbox">
            <td>
    </tr>
    <tr id="Step3_id" class="hideS3">
        <td>Step3Info</td>
        <td>
            <input id="Step3_ck" type="checkbox">
            <td>
    </tr>
    <tr>
        <td>Bottom Instruction</td>
        <td></td>
    </tr>
</table>
于 2013-07-11T18:57:58.723 回答
0

您的 HTML 正在使用无效的标记trbody。摆脱这些标签并将 and 移动id到class标签<tr>。

还要更改代码：

$("tbody").removeClass('hideS2');

至

$(".hideS2").removeClass('hideS2');
于 2013-07-11T18:33:10.040 回答