使用jquery从元素中删除类

我想我离这里很近，但不太近。。。 简言之：我试图显示表step2的底部，这取决于表step1顶部输入字段中是否存在数据。 我试图通过jQuery使用removeClass进行文档的初始加载和更改

请注意: 这里包括多个脚本-不是作为我缺乏经验的指示，而是为了表明我一直在努力解决这个问题，这些是我的多次尝试

---

您的HTML正在使用标记trbody，该标记无效。去掉这些标记，并将id和类移动到标记中

同时更改代码：

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

到

---

那么您想检查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>

---

我不得不随便想想你是怎么安排的。我希望这至少能帮助你理解为什么事情不起作用。

因为我不确定你是如何得到变量的，我只是猜测。我在说明中添加了一些复选标记，以表明该步骤已完成。下面是我的例子：

jQuery：

CSS:

HTML:

---

Javascript使用！==对于不平等，不是。你的变量不存在。如果可能，请提供小提琴？总体上认为这是一个不错的问题。很遗憾看到stackoverflow对新成员变得非常精英化+感谢你有勇气提出一个好问题。当我们试图帮助你时，没有必要投反对票。他没有投反对票——我投了。这并不能提供问题的实际解决方案。OP对这个问题缺乏基本了解，这个问题非常模糊。这类回答促进了这类问题的提出，这些问题可能不会让未来面临问题的人受益——他们所要做的就是教会用户这样做，并提出这类问题。请不要把这当成是个人的事情，我很感激你试图帮助OP，我知道你只是想帮忙：投票结果不好表示有用或不有用。本杰明：也许你可以向OP提供这个建议，而不是对所有的事情都投反对票，抨击那些好心的撒玛利亚人。我的答案是去掉无关的无效HTML，这肯定至少部分解决了这个问题。@jalynn2这是我们通常在网站上讨论礼仪的方式。否决投票的目的是为了表明我没有什么用处，但一般来说，回答非常含糊不清的问题不是一个好主意——这不仅没有回报，而且鼓励了那种“调试我的代码”问题的行为，如果你觉得我在这里做了一些不恰当的事情，我们希望避免这种行为，欢迎你来参加。如果社区觉得我做了一些不合适的事情，我会很高兴地改变我的方式：@Sooze invalid tags语法使用HTML验证程序，使用JavaScript中甚至不存在的运算符，使用您没有显示从何处获得的变量，所有这些都显示出一种非常基本的理解缺失，这与从tbody中删除类无关。在尝试这样做之前，你应该首先考虑掌握基本的JavaScript和HTML——这将不那么令人沮丧，我们将能够真正地帮助你并更快地帮助你。问题越不清楚，你得到的答案就越糟糕。我推荐官方的MDN JavaScript教程或雄辩的JavaScript：祝你好运！

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

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

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

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

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

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