Question

我需要使用 jquery 的 select2 选择类隐藏和取消隐藏 div 标签

如果我这样做，选择输入的宽度会变得非常小，无法做任何事情

在jquery事件发生后，我需要一个解决方案来像往常一样获取输入标签的宽度

这是我的 HTML 我在第二行添加了一个隐藏类 - id -> countrydiv。我需要它来删除和添加带有 onchange 事件的隐藏类

<div class="row">
    <div class="col-md-5 text-right">
        <h5 class="card-title">Worldwide</h5>
    </div>
    <div class="col-md-2">
        <div class="form-check form-switch ml-2">
            <input class="form-check-input boot-switch" type="checkbox" id="countrycheckbox" >
        </div>
    </div>
    <div class="col-md-5 text-left">
        <h5 class="card-title">Select Country</h5>
    </div>
</div>
<div class="row hidden" id="countrydiv">
    <div class="col-md-6 offset-md-3">
        <form action="{{ url('/search') }}" method="get">
            <div class="input-group text-left">                                                
                <Select class="form-control select2" multiple="multiple" id="searchCountry"> 
                    <option value="" >Select Country</option>
                    @foreach ($data['countries'] as $countries)
                        <option value="{{ $countries->id }}" @if(old('search-artist')==$countries->id) selected @else @endif>{{ $countries->country }}</option>
                    @endforeach
                </Select>
                <span class="input-group-btn">
                    <button class="btn btn-primary" type="button">
                        <span class="input-group-btn">
                            <i class="fa fa-search"></i>
                        </span>
                    </button>
                </span>
            </div>
        </form>
    </div>
</div>

这是我的 jquery

$('#countrycheckbox').on('change',function(){
    if(this.checked){
        $('#countrydiv').removeClass('hidden');
    }else{
        $('#countrydiv').addClass('hidden');
    }
});

请帮我解决一个问题，因为我需要第二个图像作为事件 onchange 后的输出

Answer 1

添加一个名为 hidden 的 css 类，如下例：

$('#countrycheckbox').on('change',function(){
    if(this.checked){
        $('#countrydiv').addClass('hidden');
    }else{
        $('#countrydiv').removeClass('hidden');
    }
});

.hidden {
  display:none
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
    <div class="col-md-5 text-right">
        <h5 class="card-title">Worldwide</h5>
    </div>
    <div class="col-md-2">
        <div class="form-check form-switch ml-2">
            <input class="form-check-input boot-switch" type="checkbox" id="countrycheckbox" >
        </div>
    </div>
    <div class="col-md-5 text-left">
        <h5 class="card-title">Select Country</h5>
    </div>
</div>
<div class="row " id="countrydiv">
    <div class="col-md-6 offset-md-3">
        <form action="{{ url('/search') }}" method="get">
            <div class="input-group text-left">                                                
                <Select class="form-control select2" multiple="multiple" id="searchCountry"> 
                    <option value="" >Select Country</option>
                    @foreach ($data['countries'] as $countries)
                        <option value="{{ $countries->id }}" @if(old('search-artist')==$countries->id) selected @else @endif>{{ $countries->country }}</option>
                    @endforeach
                </Select>
                <span class="input-group-btn">
                    <button class="btn btn-primary" type="button">
                        <span class="input-group-btn">
                            <i class="fa fa-search"></i>
                        </span>
                    </button>
                </span>
            </div>
        </form>
    </div>
</div>

Jquery 事件响应未设置样式或 js

1 个答案: