Question

当select_type发生更改时，我想隐藏下一个.div_condition。 div（a_condition）被动态注入到页面中，因此可能有很多，所以它需要在容器中找到下一个.div_condition（a_condition）。

html ...

<div class="a_condition">                                 
    <div class="form-group">
        <span class="badge i_condition">1</span>
        <label class="col-sm-4 control-label" >If</label>
        <div class="col-sm-6">
            <select class="form-control select_type">
                <option value="0">Select...</option>
                <option value="intent|.topScoringIntent.intent=product">intent=product</option>
            </select>
        </div>
    </div>

    <div class="form-group div_condition">
        <label class="col-sm-4 control-label" >Condition</label>
        <div class="col-sm-6">
            <select class="form-control select_condition">
                <option value="0">Select...</option>
                <option value="Is">Is</option>
                <option value="Is Not">Is Not</option>
                <option value="Contains">Contains</option>
                <option value="Begins With">Begins With</option>
                <option value="Ends With">Ends With</option>
            </select>
        </div>
    </div>
</div>

我试过这个;但似乎无法找到/隐藏它......

$(document).on('change', ".select_type", function (e) {
    //hide or show based on selected type
    var arr = this.value.split("|");
    switch (arr[0]) {
        case "intent": 
            var $elem = $(this).nextAll(".div_condition").hide();
            console.log($elem)
                //.closest(".div_condition").hide();
            break;
    }
});

Answer 1

如果您按<select>绑定每对div.a_condition，则以下内容应该有效：

$(document).on('change', ".select_type", function (e) {
    //hide or show based on selected type
    var arr = this.value.split("|");
    switch (arr[0]) {
        case "intent": 
            $(this).parents('.a_condition').find('.div_condition').hide();
            break;
    }
});

这是JSFiddle

在更改选择时，找到下一个div并隐藏

1 个答案: