Блог

Главная - Вопросы по программированию - Как скрыть другие флажки в другом блоке, созданном в ACF, когда установлен один флажок?

Как скрыть другие флажки в другом блоке, созданном в ACF, когда установлен один флажок?

#jquery #wordpress #advanced-custom-fields #wordpress-gutenberg

#jquery #wordpress #дополнительно-настраиваемые поля #wordpress-gutenberg

Вопрос:

Мне трудно заставить функцию работать. Я создал блок в ACF с флажком для запуска функции при сохранении записи. То, что я пытаюсь сделать, это скрыть другие флажки, когда установлен один флажок. Например, если я добавил блок, установите этот флажок в блоке, а затем добавьте другой блок, флажок в другом блоке должен быть скрыт.

Вот пример моего кода. Флажки отображаются при нажатии на синее поле:

 $(document).on( "click", '#one_image_set_thumbnail', function() {
        $(".acf-field-602d961d31e16").css({'height':'inherit','overflow':'inherit','border-top':'0','padding':'0 0 19.5px'});
});
    $(document).on("click", "#one_image_set_thumbnail,#one_image_feature_image input", function () {
        if ($("#one_image_feature_image input").is(":checked")) {
            $("#one_image_feature_image label").css("display", "none");
            $("#one_image_feature_image .acf-label").text("Thumbnail has been selected");
        } else {
            $("#one_image_feature_image label").css("display", "block");
            $("#one_image_feature_image .acf-label").text("");
        };
    }); 
 #one_image_set_thumbnail {width:120px;height:30.5px;border-color: #007cba;
background: #008dd4;border-radius: 3px;margin-bottom:10px}
#one_image_feature_image {height:0;overflow:hidden} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one_image_set_thumbnail">
</div>
<div id="one_image_feature_image" class="acf-field-602d961d31e16">
  <div class="acf-label"></div>
  <div class="acf-input">
    <label>
  <input type="checkbox" id="acf-block_603630f96e87b-field_602d961d31e16-one_img_set_feat_img" name="acf-block_603630f96e87b[field_602d961d31e16][]" value="one_img_set_feat_img">Set featured image
    </label>
  </div>
</div>
<div id="one_image_set_thumbnail">
</div>
<div id="one_image_feature_image" class="acf-field-602d961d31e16">
  <div class="acf-label"></div>
  <div class="acf-input">
    <label>
  <input type="checkbox" id="acf-block_603631086e87c-field_602d961d31e16-one_img_set_feat_img" name="acf-block_603631086e87c[field_602d961d31e16][]" value="one_img_set_feat_img">Set featured image
    </label>
  </div>
</div>

Ответ №1:

1. Когда вы пытаетесь выполнить событие для группы html-элементов, используйте class для этого. id используется в качестве уникального идентификатора для выполнения события только для одного HTML-кода на всей странице.

2. Упростите свой код, как показано ниже:

 $(document).on( "click", '.one_image_set_thumbnail', function() {
  $(this).next('.one_image_feature_image').css({
    'height':'inherit',
    'overflow':'inherit',
    'border-top':'0',
    'padding':'0 0 19.5px'
  });
});

$(document).on("click","input[type=checkbox]",function(){
  $('.acf-input').hide();
  $('.one_image_feature_image').find('.acf-label').text("");
  if($(this).is(":checked")){
    $(this).closest('.acf-input').show();
    $(this).closest('.one_image_feature_image').find('.acf-label').text("Thumbnail has been selected");
  }
  
});

Рабочий фрагмент:

 $(document).on( "click", '.one_image_set_thumbnail', function() {
  $(this).next('.one_image_feature_image').css({
    'height':'inherit',
    'overflow':'inherit',
    'border-top':'0',
    'padding':'0 0 19.5px'
  });
});

$(document).on("click","input[type=checkbox]",function(){
  $('.acf-input').hide();
  $('.one_image_feature_image').find('.acf-label').text("");
  if($(this).is(":checked")){
    $(this).closest('.acf-input').show();
    $(this).closest('.one_image_feature_image').find('.acf-label').text("Thumbnail has been selected");
  }
}); 
 /*instead of # use . now*/
.one_image_set_thumbnail {
  width:120px;
  height:30.5px;
  border-color: #007cba;
  background: #008dd4;
  border-radius: 3px;
  margin-bottom:10px
}
/*instead of # use . now*/
.one_image_feature_image {
  height:0;
  overflow:hidden
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- use class -->
<div class="one_image_set_thumbnail"></div>
<div class="one_image_feature_image acf-field-602d961d31e16"><!-- use class -->
  <div class="acf-label"></div>
  <div class="acf-input">
    <label>
      <input type="checkbox" id="acf-block_603630f96e87b-field_602d961d31e16-one_img_set_feat_img" name="acf-block_603630f96e87b[field_602d961d31e16][]" value="one_img_set_feat_img">Set featured image
    </label>
  </div>
</div>
<!-- use class -->
<div class="one_image_set_thumbnail"></div>
<div class="one_image_feature_image acf-field-602d961d31e16"><!-- use class -->
  <div class="acf-label"></div>
  <div class="acf-input">
    <label>
  <input type="checkbox" id="acf-block_603631086e87c-field_602d961d31e16-one_img_set_feat_img" name="acf-block_603631086e87c[field_602d961d31e16][]" value="one_img_set_feat_img">Set featured image
    </label>
  </div>
</div>

Примечание: — проверьте HTML-комментарий <!-- use class --> , в котором я предложил вам добавить класс, а также проверьте изменения CSS

Ответ №2:

Всякий раз, когда ваш checkbox флажок установлен, вы можете использовать .not() , чтобы исключить другие divs и скрыть их, если они отображаются. Кроме того, я использую .next() , .parent() , closest() просто для обхода DOM.

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

 $(document).on("click", '.one_image_set_thumbnail', function() {
  $(this).next(".acf-field-602d961d31e16").find(".acf-input").css("display", "block"); //show acf div ..
  $(this).next(".acf-field-602d961d31e16").css({
    'height': 'inherit',
    'overflow': 'inherit',
    'border-top': '0',
    'padding': '0 0 19.5px'
  });
});
//on click of input
$(document).on("click", ".one_image_feature_image input", function() {
  if ($(this).is(":checked")) {
    $(this).parent().css("display", "none"); //hide label
    $(this).closest('.one_image_feature_image').find(".acf-label").text("Thumbnail has been selected");
    $(".acf-input").not($(this).closest(".acf-input")).css("display", "none"); //hide other acf input div

  } else {
    $(this).parent().css("display", "block");
    $(this).closest('.one_image_feature_image').find(".acf-label").text("");
  };
}); 
 .one_image_set_thumbnail {
  width: 120px;
  height: 30.5px;
  border-color: #007cba;
  background: #008dd4;
  border-radius: 3px;
  margin-bottom: 10px
}

.one_image_feature_image {
  height: 0;
  overflow: hidden
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one_image_set_thumbnail">
</div>
<div class="acf-field-602d961d31e16 one_image_feature_image">
  <div class="acf-label"></div>
  <div class="acf-input">
    <label>
  <input type="checkbox" id="acf-block_603630f96e87b-field_602d961d31e16-one_img_set_feat_img" name="acf-block_603630f96e87b[field_602d961d31e16][]" value="one_img_set_feat_img">Set featured image
    </label>
  </div>
</div>
<div class="one_image_set_thumbnail">
</div>
<div class="acf-field-602d961d31e16 one_image_feature_image">
  <div class="acf-label"></div>
  <div class="acf-input">
    <label>
  <input type="checkbox" id="acf-block_603630f96e87b-field_602d961d31e16-one_img_set_feat_img" name="acf-block_603630f96e87b[field_602d961d31e16][]" value="one_img_set_feat_img">Set featured image
    </label>
  </div>
</div>

Прочитайте здесь для получения дополнительной информации :

https://api.jquery.com/category/traversing/tree-traversal/

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

1. Спасибо за помощь. Как и в приведенном выше ответе, это не то, о чем я просил. Я просил помощи, чтобы скрыть другой флажок, когда он выбран. Вот фотография того, чего я пытаюсь достичь — i.imgur.com/EB1mUdT.png

2. да, приведенный выше код делает это, вы его тестировали? Также у меня здесь есть класс use, потому что у вас не может быть одинаковых идентификаторов. Эта строка $(".acf-input").not($(this).closest(".acf-input")).css("display", "none"); делает это.