JQuery 中的 If/Else 語句

Question

如何將這一行修改為如果interview_schedule_id為空； 它保持隱藏狀態，如果它不是空的； 表明。

$('.interview_schedule-div'+program_input.data('id')).removeClass('hide');

腳本的其余部分：

function getInterviewSchedule(element)
{
    var program_input = $(element);
    var intake_id = $("[name='intake_id']").val();
    var campus_id = $('[name="program[' + program_input.data('id') + '][campus_id]"]').val();
    var program_id = $('[name="program[' + program_input.data('id') + '][program_id]"]').val();

    if(program_id != '' && program_id != null){
        $.ajax({
          type: 'GET',
          url: '{{ route("campus_program.interview_schedule") }}',
          data: {
            intake_id: intake_id,
            campus_id: campus_id,
            program_id: program_id
          },
          success: function (data) {
            var select_data = [];

            $.each(data, function(i, object) {
              select_data.push({id:i, text:object});
            });
            $('.interview_schedule-div'+program_input.data('id')).removeClass('hide');
            $('[name="program[' + program_input.data('id') + '][interview_schedule_id]"').select2({
              data: select_data,
              placeholder: "Please Select",
              allowClear: true
            });
            $('[name="program[' + program_input.data('id') + '][interview_schedule_id]"]').val('').trigger('change');

            @if(!empty($intake_select))
            if (intake_id == {{ $intake_select }})
            {
                @for ($i = 0; $i < $form_setting['total_program']['show']; $i++)
                @if (!empty($student_program[$i]->interview_schedule_id))
                <?php $interview_schedule_id = $student_program[$i]->interview_schedule_id; ?>
                $('[name="program['+{{$i}}+'][interview_schedule_id]"]').val({{$interview_schedule_id}}).trigger('change');
                @else
                $('[name="program['+{{$i}}+'][interview_schedule_id]"]').val('').trigger('change');
                @endif
                @endfor
            }
            @endif
          }
        });
    }
}

和 HTML：

<div class="form-group interview_schedule-div{{$i}} hide">
      <label class="col-lg-2 control-label">{{ msg('lbl_interview_schedule') }}</label>
      <div class="col-lg-6">
          {!! Form::dropdown('program['.$i.'][interview_schedule_id]', ['' => ''], @$student_program[$i]->interview_schedule_id, [
            'data-id' => $i,
            'class' => 'select2-form program-input'
          ]) !!}
      </div>
</div>

謝謝，

Answer 1

您可以使用 jquery“toggleClass”。 如果 toggleClass 方法的第二個參數解析為“truthy”，則添加類“hide”，否則將刪除。

我假設“interview_schedule_id”是 html 元素，如果是這種情況，您可以使用 $('#interview_schedule_id').length 檢查它的存在，

$('.interview_schedule-div'+program_input.data('id').toggleClass("hide",$('#interview_schedule_id').length);

Answer 2

您可以像這樣使用 jQuery 方法show()和hide() ：

let div = $('.interview_schedule-div' + program_input.data('id'));
div.children().length > 0 ? div.show() : div.hide();

注意：下面的兩個示例具有相同的代碼。 一個示例具有帶有子元素的 div，而另一個示例具有一個空的 div。 此外，div 類interview_schedule-div...在這里寫成interview_schedule-div1因此我們可以訪問它進行測試。

---

例子：

 let div = $('.interview_schedule-div1'); div.children().length > 0 ? div.show() : div.hide();

 .interview_schedule-div1 { padding: 20px; background-color: #09f; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group interview_schedule-div1 hide"> <label class="col-lg-2 control-label">Schedule</label> <div class="col-lg-6"></div> </div>

 let div = $('.interview_schedule-div1'); div.children().length > 0 ? div.show() : div.hide();

 .interview_schedule-div1 { padding: 20px; background-color: #09f; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group interview_schedule-div1 hide"> </div>