Блог

Главная - Вопросы по программированию - Как показать или скрыть div, если div присутствует и имеет значение

Как показать или скрыть div, если div присутствует и имеет значение

#html #jquery #validation

#HTML #jquery #проверка

Вопрос:

 <fieldset class=​"crm-public-form-item crm-group payment_options-group" style=​"display:​ block !important;​ visibility:​ visible;​">​
<div class=​"crm-public-form-item crm-section payment_processor-section" style=​"display:​ block;​">​
  <div class=​"content">    
    ​<input class=​"payment_processor_1 crm-form-radio" value=​"5" type=​"radio" id=​"CIVICRM_QFID_5_payment_processor_id" name=​"payment_processor_id">    
    <input class=​"payment_processor_2 crm-form-radio" value=​"3" type=​"radio" id=​"CIVICRM_QFID_3_payment_processor_id" name=​"payment_processor_id">​
  </div>​
 </div>​
</fieldset>​

<div id=​"crm-submit-buttons" class=​"crm-submit-buttons" style=​"visibility:​ visible;​ display:​ block;​">
​  <button class=​"crm-form-submit default validate crm-button crm-button-type-upload crm-button_qf_Main_upload" value=​"1" type=​"submit" name=​"_qf_Main_upload" id=​"_qf_Main_upload-bottom">​…​</button>​
</div>​

введите описание изображения здесь

У меня есть этот html-блок, и я немного застрял с проверкой. Условия

  • payment_options-набор полей группы должен присутствовать на этой странице
  • И хотя бы один из переключателей отмечен
  • Затем покажите div crm-submit-buttons
  • В противном случае скрыть crm-submit-buttons div

Я пробовал следующее, но не смог заставить его работать, также не уверен, как определить условие payment_options-набор полей группы должен присутствовать на этой странице. Это важно, потому что «crm-submit-buttons» управляется другим набором полей, которого нет на этой странице.

      if( $("#payment_options-group").val().length === 1 ) {
     $("div#crm-submit-buttons").show();
     }
else {
$("div#crm-submit-buttons").hide();
}

Любая помощь будет оценена. Заранее спасибо.

Ответ №1:

Вы можете проверить, установлена ли длина > 0 , а затем флажок установлен, и fieldsets присутствует в зависимости от этого показать или скрыть div .

Демонстрационный код :

 console.log($(".payment_options-group").length   "--length of fielset")
console.log($("input[name=payment_processor_id]:checked").length   "--length of chekd")
//check if fieldset is prsent and checked length if > 0
if (($(".payment_options-group").length > 0) amp;amp; ($("input[name=payment_processor_id]:checked").length > 0)) {
  $("div#crm-submit-buttons").show();
} else {
  $("div#crm-submit-buttons").hide();
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="crm-public-form-item crm-group payment_options-group" style="display:block !important; visibility: visible;">
  <div class="crm-public-form-item crm-section payment_processor-section" style="display:block;">
    <div class="content">
      <input class="payment_processor_1 crm-form-radio" value="5" type="radio" id="CIVICRM_QFID_5_payment_processor_id" name="payment_processor_id">
      <input class="payment_processor_2 crm-form-radio" value="3" type="radio" id="CIVICRM_QFID_3_payment_processor_id" name="payment_processor_id" checked>
    </div>
  </div>
</fieldset>

<div id="crm-submit-buttons" class="crm-submit-buttons" style="visibility:visible; display:block;">
  <button class="crm-form-submit default validate crm-button crm-button-type-upload crm-button_qf_Main_upload" value="1" type="submit" name="_qf_Main_upload" id="_qf_Main_upload-bottom">​…</button>
</div>

Комментарии:

1. это ваша html-структура, которую вы опубликовали? Также посмотрите, что печатает консоль .

2. [Log] 1-длина набора полей (button.js , строка 54) [Log] 0-длина chekd (button.js , строка 55) с консоли. Когда опция не выбрана. Кнопка отправки все еще видна. HTML правильный. Добавлен скриншот.

3. как вызывается код? при нажатии какой-либо кнопки?

4. Нет, это форма. Предварительно загруженный со всеми элементами. Если присутствует несколько платежных процессоров, то через JS вызывается «fieldset». Если присутствует только один идентификатор платежного процессора, «fieldset» заменяется на «платежный блок», как видно из скриншота.

5. Работает нормально, проверьте здесь . Также попробуйте обернуть свой код внутри $(document).ready..

Ответ №2:

Вот демонстрация с флажками, которые могут быть проще понять, поскольку вы можете снять флажок, чтобы кнопка снова исчезла:

 $(".crm-submit-buttons").hide(); // hides button on load 

$('.crm-form-radio').on('click', function() {
  if ($('.payment_options-group').length > 0 amp;amp; $('.crm-form-radio:checked').length) {
    $(".crm-submit-buttons").show();
  } else {
    $(".crm-submit-buttons").hide();
  }
}) 
 fieldset{
  width: 200px;
}

button {
  margin-top: 10px;
  border-radius: 4px;
  background: lightblue;
  display: inline-block;
  padding: 5px 10px;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="payment_options-group">
  <input class="crm-form-radio" value="5" type="checkbox" name="payment_processor_id">
  <input class="crm-form-radio" value="3" type="checkbox" name="payment_processor_id">
</fieldset>

<div class="crm-submit-buttons"><button>Button</button></div>