Функция скрытия DIV на основе ввода радио-кнопки ACF - PullRequest
0 голосов
/ 06 сентября 2018

У меня есть созданное пользовательское поле Radio Button с тремя вариантами:

  • баннер
  • встроенный
  • нет

В моем шаблоне страницы у меня есть 2 элемента div, содержащие изображение объекта, один из которых является баннером, а другой - встроенным, расположенным под заголовком, с классами «banner-feature-image» и «inline-feature-image» соответственно.

Я бы хотел {display: none;} класс «inline-feature-image», когда выбрана опция ACF «banner».

Я бы хотел {display: none;} класс «banner-feature-image», когда выбран ACF «inline».

И я хотел бы {отображать: нет;} оба класса «banner-feature-image» и «inline-feature-image», когда выбрана опция ACF «none».

Я только начинаю изучать javascript, и, судя по тому, что я собрал из информации в Интернете, я не могу заставить эту функцию работать.

Я пробовал много вариантов этого.

    var image_location = get_field( "feature_image_location" );
    var inline_feature_image = document.getElementsByClassName('inline-feature-image');
    var banner_feature_image = document.getElementsByClassName('banner-feature-image');

    if( image_location == 'banner') {
      inline_feature_image.style.display = 'none !important';
    } 

    if( image_location == 'inline') {
      banner_feature_image.style.display = 'none !important' ;
    } 

    if( image_location == 'none') {
      banner_feature_image.style.display = 'none !important';
      inline_feature_image.style.display = 'none !important';
    } 

Также некоторая помощь с тем, где его поставить. Я использую плагин Code Snippets для некоторых других вещей, но иногда он работает, а иногда нет (предположим, потому что Code Snippets предназначен для PHP?).

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

Ура Кристиан

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Спасибо за вашу помощь. Я не думаю, что предоставил достаточно информации в своем оригинальном сообщении. Поля ACF располагались на странице редактирования бэкэнда, а местоположения изображений баннера располагались на внешней стороне.

Мне кажется, я также не совсем понял, как работают поля ACF.

Мне удалось выяснить это с помощью wp_head, чтобы добавить стилизацию на основе ввода этих полей

<?php
add_action('wp_head', 'feature_image_script');
function feature_image_script() {
?>
<?php
$all_acf_fields = get_fields();
echo '<style>';
    foreach($all_acf_fields as $acf_field_slug => $acf_field_value) {
        if ($acf_field_value == 'banner'){
            echo 'body:not(.elementor-editor-active) .inline-feature-image { display: none; }';
        }
      if ($acf_field_value == 'inline'){
            echo 'body:not(.elementor-editor-active) .banner-feature-image { display: none; }';
        }
      if ($acf_field_value == 'none'){
            echo 'body:not(.elementor-editor-active) .banner-feature-image { display: none; } body:not(.elementor-editor-active) .inline-feature-image { display: none; }';

        }
    };
    unset($value);
  echo '</style>';
};

Возможно, это не самая чистая реализация, но она достигла того, чего я добился.

0 голосов
/ 06 сентября 2018

Попробуйте это:

$( document ).ready(function() {
  $('#radio_banner').change(function(){
    if ( $(this).is(':checked') ) {
      $( "#inline" ).css({"display":"none"});
      $( "#banner" ).css({"display":"block"}); 
    }
  });

  $('#radio_inline').change(function(){
    if ( $(this).is(':checked') ) {
      $( "#banner" ).css({"display":"none"}); 
      $( "#inline" ).css({"display":"block"});    
    }
  });

  $('#radio_none').change(function(){
    if ( $(this).is(':checked') ) {
      $( "#inline" ).css({"display":"none"});
      $( "#banner" ).css({"display":"none"}); 
    }
  });

  $('#radio_all').change(function(){
    if ( $(this).is(':checked') ) {
      $( "#inline" ).css({"display":"block"});
      $( "#banner" ).css({"display":"block"}); 
    }
  });
});
* {
  border: 0;
  padding: 0;
  margin: 0;
}
#banner {
  width: 100%;
  height: 56px;
  position: relative;
  top: 0;
  left: 0;
  background-color: royalblue;
}
label[for="radio_banner"] {
  background-color: royalblue;
  width: auto;
}
#inline {
  width: 100%;
  height: 56px;
  position: relative;
  top: 0;
  left: 0;
  background-color: yellow;
}
label[for="radio_inline"] {
  background-color: yellow;
  width: auto;
}
<div id="banner"></div>
<div id="inline"></div>

<form id="my_form" action="">
  <input type="radio" name="display" id="radio_banner" value="banner"><label for="radio_banner"><span> Banner</span></label><br>
  <input type="radio" name="display" id="radio_inline" value="inline"><label for="radio_inline"> Inline</label><br>
  <input type="radio" name="display" id="radio_none" value="none"><label for="radio_none"> None</label><br>
  <input type="radio" name="display" id="radio_all" value="all"><label for="radio_all"> All</label>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Если хотите, вы можете заменить .css({"display":"none"}) на jQuery fadeOut(), как в этой демонстрации, или вы можете использовать чистый JavaScript с document.getElementById( 'elemtId' ).style.display = 'none';

Здесь JSFiddle вышеуказанного кода

Cheers

...