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

debugcn 发表于 Dev

抢

当select_type发生更改时，我想隐藏下一个.div_condition。div（a_condition）是动态注入到页面中的，因此可能有很多，因此需要在容器（a_condition）中找到下一个.div_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;
    }
});

苹果电脑

如果您在边界每对<select>S按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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。