Question

我正在尝试编写一些jQuery，以便当选择具有特定类（表单域）的<div>时，随后的<div>具有不同类（表单域dropdwon ）删除了另一个CSS类（隐藏）。

这是html

             <div class="col-sm">
                <h2 class="section-title">
                  Header                    </h2>
                <input type="hidden" name="" value=""  />
                <div class="form-field">
                  Header <i class="fa fa-caret-down orange"></i>
                  <div class="form-field-dropdown hide">
                    <div class="select-option selected">
                      Option
                    </div>
                    <div class="select-option">
                      Option
                    </div>
                    <div class="select-option">
                      Option
                    </div>
                    <div class="select-option">
                      Option
                    </div>
                    <div class="select-option">
                      Option
                    </div>
                  </div>
                </div>

这是我正在使用的jQuery：

<script>
    $(".form-field").click(function() {
        $(this).next().find(".form-field-dropdown").removeclass('hide');
    });
</script>

我尝试了各种版本，但似乎无法选择我所追求的<div>。你能帮忙吗？

Answer 1

您的form-field-dropdown div不是下一个兄弟，所以next（）无法工作，

使用find函数来实现这一点，以便在父“ .form-field”内部找到“ .form-field-dropdown”

<script>
    $(".form-field").click(function() {
        $(this).find(".form-field-dropdown").removeClass('hide');
    });
</script>

也是removeClass（），而不是removeclass（）。 C大写

Answer 2

示例代码中没有next（）元素。根据代码的结构，您似乎想直接在form-field-dropdown类内部找到form-field。

因此正确的JS应该是：$(this).find(".form-field-dropdown").removeClass('hide')

这可以解决您的问题吗？

Answer 3

next()为您提供了元素的下一个同级元素，这不是您想要的。您想在当前元素（this）中找到该元素。只需删除next()，它应该可以工作。

<script>
    $(".form-field").click(function() {
        $(this).find(".form-field-dropdown").removeclass('hide');
    });
</script>

Answer 4

.next()在这里多余。您只需要在此div中找到孩子：

$(".form-field").click(function() {
    $(this).find(".form-field-dropdown").removeClass('hide');
});

如果仍然无法按预期工作，请检查CSS并在那里找到一些错误。并检查Elements检查器，您的html内部会发生什么。

获取具有特定类的下一个<div>并删除一个类

4 个答案: