基于 ACF 单选按钮输入的功能隐藏 DIV

Question

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

• 横幅
• 内联
• 无

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

我想要{display：none;}选择ACF选项“横幅”时，“内联 - 功能图像”类。

我想要{display：none;选择ACF“内联”时，“横幅 - 特征图像”类。

，我想要{显示：无;}选择ACF选项“无”时，类别“横幅特征图像”和“内联 - 功能图像”。

我还处于 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>

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

这里是上面代码的JSFiddle

干杯

Answer 2

感谢您的帮助。我认为我在原始帖子中没有提供足够的信息。 ACF 字段位于后端 Edit Page，Banner 图片位置位于前端。

我想我也没有完全掌握 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>';
};

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