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

Posted 2023-03-25

【中文标题】基于 ACF 单选按钮输入的功能隐藏 DIV

【英文标题】：Function hide DIVs based on ACF Radio button input

【发布时间】：2019-02-11 06:39:04

【问题描述】：

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

横幅 内联 无

在我的页面模板中，我有 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 的？）。

任何帮助将不胜感激。

克里斯蒂安干杯

【问题讨论】：

请同时发布您的 html 代码。一个完整的示例将有助于确定您到目前为止所尝试的内容以及如何进行纠正。

已经提供给你的答案记得选择，干杯

【参考方案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

干杯

【参考方案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>';
;

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