Question

我有一个主div容器，里面有4个隐藏的div（我在css中用display：none创建了一个类，并将其添加到每个内部div），主div从下拉列表中读取一个值并根据读取值取消隐藏许多div。

 <div id="ddlContainer">
            <div id="div1" class="hide">
                <center>Select option:</center>
                <select id="ddl1">
                      <!--options are added here-->
                </select>
            </div>
            <div id="div2" class="hide">
                <center>Select option:</center>
                <select id="ddl2">
                      <!--options are added here-->
                </select>
            </div>
            <div id="div3" class="hide">
                <center>Select option:</center>
                <select id="ddl3">
                      <!--options are added here-->
                </select>
            </div>
            <div id="div4" class="hide">
                <center>Select option:</center>
                <select id="ddl4">
                      <!--options are added here-->
                </select>
            </div>
        </div>

但是removeClass对我不起作用。

  var diff, NumofHiddenDDLs = $("#ddlContainer").children().filter("[class=hide]");
        if (ReadValue > NumofHiddenDDLs.length) {
            diff = 1;
        }
        else {
            diff = 2;
        }
        if (diff == 1) {
            //TODO add class hide to shown divs
        }
        else {
            for (var i = 0; i < ReadValue; i++) 
                ($("#ddlContainer").children()[i]).removeClass("hide");
        }

谁能告诉我我做错了什么？感谢

Answer 1

您需要额外的$：

$($("#ddlContainer").children()[i]).removeClass("hide");

这个$("#ddlContainer").children()[i]将返回id为ddlContainer的元素的第i个子元素，这将是一个html元素而不是jQuery对象。所以你想要访问jQuery方法。通过使用$包装它，您将拥有一个jQuery对象，并且您将可以访问removeClass方法。

实现相同结果的另一种方法是使用Satpal回答，而不是访问具有索引的子数组以使用eq方法并获取jQuery对象那将包含你想要的元素。

Answer 2

您的实施问题是($("#ddlContainer").children()[i])返回DOM元素，而他们没有removeClass()方法。

您应该使用.eq(index)获取所需的元素，然后使用removeClass()

$("#ddlContainer").children().eq(i).removeClass("hide");

Answer 3

您可以使用lt选择器并移除for循环 -

$("#ddlContainer").children(":lt(" + ReadValue + ")").removeClass("hide");

查看下面的演示版本，其中我隐藏了CSS类（背景颜色为RED）并删除了索引小于3 -

$(function(){
  $("#ddlContainer").children(":lt(3)").removeClass("hide");
});

.hide {
 background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ddlContainer">
            <div id="div1" class="hide">
                <center>Select option:</center>
                <select id="ddl1">
                      <!--options are added here-->
                </select>
            </div>
            <div id="div2" class="hide">
                <center>Select option:</center>
                <select id="ddl2">
                      <!--options are added here-->
                </select>
            </div>
            <div id="div3" class="hide">
                <center>Select option:</center>
                <select id="ddl3">
                      <!--options are added here-->
                </select>
            </div>
            <div id="div4" class="hide">
                <center>Select option:</center>
                <select id="ddl4">
                      <!--options are added here-->
                </select>
            </div>
        </div>

Answer 4

当你有第i个元素时，只需使用纯js功能classList

$("#ddlContainer").children()[i].classList.remove("hide")

注意：在这种情况下，您不会在每个步骤中创建其他对象

removeClass方法无效jquery

4 个答案: