javascript - 函数隐藏基于 ACF 单选按钮输入的 DIV

Question

我创建了一个单选按钮自定义字段，具有三个选项:

• 横幅
• 内联
• 无

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

当选择 ACF 选项“banner”时，我想{display:none;}类“inline-feature-image”。

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

当选择 ACF 选项“none”时，我想{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 替换 .css({"display":"none"}) fadeOut() ，如 this demo ，或者您可以选择使用纯 JavaScript 和 document.getElementById( 'elemtId' ).style.display = 'none';

这里是 JSFiddle以上代码

干杯