优化

Question

这是Js代码

$('body').delegate('change', '#received_type', function() {
    var received = $('#received_type').val()
    if (received === 1) {
        $('#check').removeClass('hide')
        $('#check').show();
        $('#dd').hide();
    } else if (received === 3) {
        $('#dd').hide();
        $('#check').hide();
    } else if (received === 2) {
        $('#dd').removeClass('hide')
        $('#dd').show();
        $('#check').hide();
    }
})

此Html代码

<div class="form-group">
                        <label class="col-md-3 control-label" for="inputSuccess">
                            Received Type :
                        </label>
                        <div class="col-sm-9">
                            <select class="form-control" name="received_type" id="received_type" required="required">
                                <option value="">Select Received Type</option>
                                <option value="1">Check</option>
                                <option value="2">DD</option>
                                <option value="3">Cash</option>
                            </select>
                        </div>
                    </div>
                    <br/><br/>
                    <div class="form-group hide" id="check">
                        <label class="col-md-3 control-label" for="inputSuccess">
                            Check Number :
                        </label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="check_no" id="check_number" placeholder="Check Number" required="required" />
                        </div>
                    </div>
                    <div class="form-group hide" id="dd">
                        <label class="col-md-3 control-label" for="inputSuccess">
                            DD Number :
                        </label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="dd_no" id="dd_number" placeholder="DD Number" required="required" />
                        </div>                            
                    </div>

我的问题是

每当我选择Check或DD，然后文本框正常工作，但是当我选择Cash选项时，DD或Check必须隐藏但是它不起作用。

请建议。

Thanx In Advance。

Answer 1

从jQuery 1.7开始，.delegate（）已被.on（）方法取代。 Source

然后将var received = $('#received_type').val()更改为var received = $(this).val()。

该值以字符串形式给出，而不是整数。因此received === 1将不匹配。而是使用received == 1，以便检查值是否相同，但不会查看值的类型。

$('body').on('change', '#received_type', function() {
    var received = $(this).val()

    if (received == 1) {
        $('#check').removeClass('hide')
        $('#check').show();
        $('#dd').hide();
    } else if (received == 3) {
        $('#dd').hide();
        $('#check').hide();
    } else if (received == 2) {
        $('#dd').removeClass('hide')
        $('#dd').show();
        $('#check').hide();
    }
});

DEMO

优化

至于优化代码。而是将您的选择（值）更改为：

<select class="form-control" name="received_type" id="received_type" required="required">
    <option value="">Select Received Type</option>
    <option value="check">Check</option>
    <option value="dd">DD</option>
    <option value="cash">Cash</option>
</select>

然后您可以将jQuery函数更改为：

$('body').on('change', '#received_type', function() {
    var received = $(this).val();

    $('.form-group.hide').hide();
    $('#'+received).show();
});

它首先隐藏同时包含.form-group和.hide类的所有元素，然后显示所选的ID。

DEMO 2

在更改下拉列表中隐藏thrid选项不起作用

1 个答案:

优化