Fatal编程技术网
  • javascript/
  • Javascript 根据JS中html标记的类和id（增量）隐藏和显示div

Javascript 根据JS中html标记的类和id（增量）隐藏和显示div

javascript jquery html laravel

Javascript 根据JS中html标记的类和id（增量）隐藏和显示div,javascript,jquery,html,laravel,Javascript,Jquery,Html,Laravel,目前我有多个select选项使用MDBfrontendframework 我用不同的类、id和名称加载它 这是工作代码 @if(count($manage_access_list)) @foreach($manage_access_list as $field) <div class="row"> <div class="col-md

目前我有多个
select选项
使用
MDB
frontendframework

我用不同的
类、id和名称加载它

这是工作代码


 @if(count($manage_access_list))
                    @foreach($manage_access_list as $field)
                        <div class="row">
                            <div class="col-md-2">
                                {{$field->access_desc}}
                            </div>
                            <div class="col-md-4">
                                <select class="mdb-select accessSelect{{$field->id}}" name="accessSelect{{$field->id}}" id="accessSelect{{$field->id}}" style="width: 170px!important;">
                                    <option value="" disabled selected>Select Access Right</option>
                                    <option value="ALL">All Access</option>
                                    <option value="NO">No Access</option>
                                    <option value="CONFIG">Config Access</option>
                                </select>
                            </div>

                                <div class="col-md-2 access-right{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input add{{$field->id}}" name="add{{$field->id}}" id="add{{$field->id}}">
                                        <label class="custom-control-label" for="add{{$field->id}}">Add</label>
                                    </div>
                                </div>
                                <div class="col-md-2 access-right{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input edit{{$field->id}}" name="edit{{$field->id}}" id="edit{{$field->id}}">
                                        <label class="custom-control-label" for="edit{{$field->id}}">Edit</label>
                                    </div>
                                </div>
                                <div class="col-md-2 access-right{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input remove{{$field->id}}" name="remove{{$field->id}}" id="remove{{$field->id}}">
                                        <label class="custom-control-label" for="remove{{$field->id}}">Remove</label>
                                    </div>
                                </div>

                        </div>
                    @endforeach
                @endif



@if（计数（$manage\u access\u list））
@foreach（$manage\u access\u list as$field）
{{$field->access_desc}
选择访问权限
所有访问
禁止进入
配置访问
添加
编辑
去除
@endforeach
@恩迪夫


这是我的JS代码


<script>
$("#accessSelect1").on('change', function() {
    if(this.value == "ALL"){
       $(".access-right1").hide();
    }
    else if (this.value == "NO"){
        $(".access-right1").hide();
    }
    else if(this.value == "CONFIG"){
        $(".access-right1").show();
    }
  });

  </script>




$（“#accessSelect1”）。在（'change'，function（）上{
如果（this.value==“全部”）{
$（“.access-right1”）.hide（）；
}
else if（this.value==“否”）{
$（“.access-right1”）.hide（）；
}
else if（this.value==“CONFIG”）{
$（“.access-right1”）.show（）；
}
});


输出：





如您所见，
select option
accessSelect1
的id是硬编码的

我试图做的是显示和隐藏每行的特定
添加、编辑、删除
。使用
select选项的id
accessSelect


@if(count($manage_access_list))
                    @foreach($manage_access_list as $field)
                        <div class="row">
                            <div class="col-md-2">
                                {{$field->access_desc}}
                            </div>
                            <div class="col-md-4">
                                <select data-id = "{{$field->id}}" class="access-select mdb-select accessSelect{{$field->id}}" name="accessSelect{{$field->id}}" id="accessSelect-{{$field->id}}" style="width: 170px!important;">
                                    <option value="" disabled selected>Select Access Right</option>
                                    <option value="ALL">All Access</option>
                                    <option value="NO">No Access</option>
                                    <option value="CONFIG">Config Access</option>
                                </select>
                            </div>

                                <div class="col-md-2" id="access-right-{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input add{{$field->id}}" name="add{{$field->id}}" id="add-{{$field->id}}">
                                        <label class="custom-control-label" for="add{{$field->id}}">Add</label>
                                    </div>
                                </div>
                                <div class="col-md-2" id="access-right-{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input edit{{$field->id}}" name="edit{{$field->id}}" id="edit-{{$field->id}}">
                                        <label class="custom-control-label" for="edit{{$field->id}}">Edit</label>
                                    </div>
                                </div>
                                <div class="col-md-2" id="access-right-{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input remove{{$field->id}}" name="remove{{$field->id}}" id="remove-{{$field->id}}">
                                        <label class="custom-control-label" for="remove{{$field->id}}">Remove</label>
                                    </div>
                                </div>

                        </div>
                    @endforeach
                @endif


到目前为止，显示和隐藏div仅适用于
accessSelect1
试试这个

希望这能奏效

声明
data id=“{{$field->id}}”
on
select


@if(count($manage_access_list))
                    @foreach($manage_access_list as $field)
                        <div class="row">
                            <div class="col-md-2">
                                {{$field->access_desc}}
                            </div>
                            <div class="col-md-4">
                                <select data-id = "{{$field->id}}" class="access-select mdb-select accessSelect{{$field->id}}" name="accessSelect{{$field->id}}" id="accessSelect-{{$field->id}}" style="width: 170px!important;">
                                    <option value="" disabled selected>Select Access Right</option>
                                    <option value="ALL">All Access</option>
                                    <option value="NO">No Access</option>
                                    <option value="CONFIG">Config Access</option>
                                </select>
                            </div>

                                <div class="col-md-2" id="access-right-{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input add{{$field->id}}" name="add{{$field->id}}" id="add-{{$field->id}}">
                                        <label class="custom-control-label" for="add{{$field->id}}">Add</label>
                                    </div>
                                </div>
                                <div class="col-md-2" id="access-right-{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input edit{{$field->id}}" name="edit{{$field->id}}" id="edit-{{$field->id}}">
                                        <label class="custom-control-label" for="edit{{$field->id}}">Edit</label>
                                    </div>
                                </div>
                                <div class="col-md-2" id="access-right-{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input remove{{$field->id}}" name="remove{{$field->id}}" id="remove-{{$field->id}}">
                                        <label class="custom-control-label" for="remove{{$field->id}}">Remove</label>
                                    </div>
                                </div>

                        </div>
                    @endforeach
                @endif


在
选择上添加
访问权限
类


@if(count($manage_access_list))
                    @foreach($manage_access_list as $field)
                        <div class="row">
                            <div class="col-md-2">
                                {{$field->access_desc}}
                            </div>
                            <div class="col-md-4">
                                <select data-id = "{{$field->id}}" class="access-select mdb-select accessSelect{{$field->id}}" name="accessSelect{{$field->id}}" id="accessSelect-{{$field->id}}" style="width: 170px!important;">
                                    <option value="" disabled selected>Select Access Right</option>
                                    <option value="ALL">All Access</option>
                                    <option value="NO">No Access</option>
                                    <option value="CONFIG">Config Access</option>
                                </select>
                            </div>

                                <div class="col-md-2" id="access-right-{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input add{{$field->id}}" name="add{{$field->id}}" id="add-{{$field->id}}">
                                        <label class="custom-control-label" for="add{{$field->id}}">Add</label>
                                    </div>
                                </div>
                                <div class="col-md-2" id="access-right-{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input edit{{$field->id}}" name="edit{{$field->id}}" id="edit-{{$field->id}}">
                                        <label class="custom-control-label" for="edit{{$field->id}}">Edit</label>
                                    </div>
                                </div>
                                <div class="col-md-2" id="access-right-{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input remove{{$field->id}}" name="remove{{$field->id}}" id="remove-{{$field->id}}">
                                        <label class="custom-control-label" for="remove{{$field->id}}">Remove</label>
                                    </div>
                                </div>

                        </div>
                    @endforeach
                @endif



@if（计数（$manage\u access\u list））
@foreach（$manage\u access\u list as$field）
{{$field->access_desc}
选择访问权限
所有访问
禁止进入
配置访问
添加
编辑
去除
@endforeach
@恩迪夫




$（“.access select”）.on（'change'，function（）{
var id=$（this.attr（'data-id'）；
如果（this.value==“全部”）{
$（“#访问权限-”+id）.hide（）；
}
else if（this.value==“否”）{
$（“#访问权限-”+id）.hide（）；
}
else if（this.value==“CONFIG”）{
$（“#访问权限-”+id）.show（）；
}
});

试试这个

希望这能奏效

声明
data id=“{{$field->id}}”
on
select


@if(count($manage_access_list))
                    @foreach($manage_access_list as $field)
                        <div class="row">
                            <div class="col-md-2">
                                {{$field->access_desc}}
                            </div>
                            <div class="col-md-4">
                                <select data-id = "{{$field->id}}" class="access-select mdb-select accessSelect{{$field->id}}" name="accessSelect{{$field->id}}" id="accessSelect-{{$field->id}}" style="width: 170px!important;">
                                    <option value="" disabled selected>Select Access Right</option>
                                    <option value="ALL">All Access</option>
                                    <option value="NO">No Access</option>
                                    <option value="CONFIG">Config Access</option>
                                </select>
                            </div>

                                <div class="col-md-2" id="access-right-{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input add{{$field->id}}" name="add{{$field->id}}" id="add-{{$field->id}}">
                                        <label class="custom-control-label" for="add{{$field->id}}">Add</label>
                                    </div>
                                </div>
                                <div class="col-md-2" id="access-right-{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input edit{{$field->id}}" name="edit{{$field->id}}" id="edit-{{$field->id}}">
                                        <label class="custom-control-label" for="edit{{$field->id}}">Edit</label>
                                    </div>
                                </div>
                                <div class="col-md-2" id="access-right-{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input remove{{$field->id}}" name="remove{{$field->id}}" id="remove-{{$field->id}}">
                                        <label class="custom-control-label" for="remove{{$field->id}}">Remove</label>
                                    </div>
                                </div>

                        </div>
                    @endforeach
                @endif


在
选择上添加
访问权限
类


@if(count($manage_access_list))
                    @foreach($manage_access_list as $field)
                        <div class="row">
                            <div class="col-md-2">
                                {{$field->access_desc}}
                            </div>
                            <div class="col-md-4">
                                <select data-id = "{{$field->id}}" class="access-select mdb-select accessSelect{{$field->id}}" name="accessSelect{{$field->id}}" id="accessSelect-{{$field->id}}" style="width: 170px!important;">
                                    <option value="" disabled selected>Select Access Right</option>
                                    <option value="ALL">All Access</option>
                                    <option value="NO">No Access</option>
                                    <option value="CONFIG">Config Access</option>
                                </select>
                            </div>

                                <div class="col-md-2" id="access-right-{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input add{{$field->id}}" name="add{{$field->id}}" id="add-{{$field->id}}">
                                        <label class="custom-control-label" for="add{{$field->id}}">Add</label>
                                    </div>
                                </div>
                                <div class="col-md-2" id="access-right-{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input edit{{$field->id}}" name="edit{{$field->id}}" id="edit-{{$field->id}}">
                                        <label class="custom-control-label" for="edit{{$field->id}}">Edit</label>
                                    </div>
                                </div>
                                <div class="col-md-2" id="access-right-{{$field->id}}" style="display:none;">
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input remove{{$field->id}}" name="remove{{$field->id}}" id="remove-{{$field->id}}">
                                        <label class="custom-control-label" for="remove{{$field->id}}">Remove</label>
                                    </div>
                                </div>

                        </div>
                    @endforeach
                @endif



@if（计数（$manage\u access\u list））
@foreach（$manage\u access\u list as$field）
{{$field->access_desc}
选择访问权限
所有访问
禁止进入
配置访问
添加
编辑
去除
@endforeach
@恩迪夫




$（“.access select”）.on（'change'，function（）{
var id=$（this.attr（'data-id'）；
如果（this.value==“全部”）{
$（“#访问权限-”+id）.hide（）；
}
else if（this.value==“否”）{
$（“#访问权限-”+id）.hide（）；
}
否则，如果（this.va