Question

我创建了一个单选按钮自定义字段，其中包含三个选项：

横幅
内联
无人

在我的页面模板中，我有2个包含要素图像的div，一个是横幅，另一个是内嵌在标题下方，分别具有“ banner-feature-image”和“ inline-feature-image”类。

当选择了ACF选项“横幅”时，我想{display：none;}类“ inline-feature-image”。

当选择ACF“内联”时，我想{display：none;}类“ banner-feature-image”。

当选择了ACF选项“无”时，我想{display：none;}这两个类“ banner-feature-image”和“ inline-feature-image”。

我还很早就开始使用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？）。

任何帮助将不胜感激。

干杯克里斯蒂安

Answer 1

尝试这个：

$( 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>

如果需要，您可以将jQuery fadeOut()替换为.css({"display":"none"})，就像在this demo中一样，也可以选择将纯JavaScript与document.getElementById( 'elemtId' ).style.display = 'none';一起使用

此处是上述代码的JSFiddle

欢呼

Answer 2

感谢您的协助。我认为我在原始帖子中没有提供足够的信息。 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>';
};

这可能不是最干净的实现，但它实现了我的追求。

根据ACF单选按钮输入功能隐藏DIV

2 个答案: