Question

我觉得我非常接近 - 但不是那么...... 简而言之：我试图显示表格的底部（步骤2），这取决于表格顶部输入字段中数据的存在（步骤1）。我试图通过jQuery使用removeClass来初始加载文档和更改。

请注意：这里包含的是多篇文章 - 不是我不体验的表现，而是表明我一直在努力解决这个问题，这些都是我多次尝试......

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

Answer 1

因此，您要检查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");
});

我不得不采取一些自由，并猜测你是如何设置的。我希望这至少可以帮助你理解为什么事情不起作用。

Answer 2

您的HTML使用的标记trbody无效。删除这些标记并将id和class移至<tr>标记。

同时更改代码：

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

到

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

Answer 3

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

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>

使用jquery从元素中删除类

3 个答案: