Question

我是第一次使用ACF，并且正在努力使其正常工作。我创建了一个带有2个选项的“选择”字段（在特定页面上由后端控制）

<select id="acf-field_5bf80363f0c0f" class="" name="acf[field_5bf80363f0c0f]" data-ui="0" data-ajax="0" data-multiple="0" data-placeholder="Select" data-allow_null="0">
<option value="No Issues">No Issues</option>
<option value="Issues reported" selected="selected" data-i="0">Issues Reported</option>
</select>

我想实现的是，如果选定的选项不等于“无问题”，它将向选定的div添加一个自定义类（.Error），例如ID为＃ServiceStatus1。我尝试使用我有限的jQuery知识，但没有任何乐趣。

希望这是有道理的，任何建议都非常感谢。

<script type ="text/javascript">
$(function() {
  $('#acf-field_5bf80363f0c0f').ready(function(){
    $('.Error').hide();
    $('#ServiceStatus1' + $('.Error').val() != 'No Issues').show();
  });
});
</script>

Answer 1

您的问题和您的代码似乎在问不同的问题...

如果要基于选择中的值添加/删除类，则可以执行以下操作：

$(function() {

  function addServiceStatusClass(e){
    if($(this).val() != 'No Issues'){
        $('#ServiceStatus1').addClass('Error');
     }else{
        $('#ServiceStatus1').removeClass('Error');
     }
  }

  $('#acf-field_5bf80363f0c0f').ready(addServiceStatusClass);
  $('#acf-field_5bf80363f0c0f').change(addServiceStatusClass);

});

示例： http://jsfiddle.net/m2o361th/2/

但是，如果您要做的只是根据值显示/隐藏#ServiceStatus1，您可以执行以下操作：

$(function() {

function addServiceStatusClass(e){
    if($(this).val() != 'No Issues'){
        $('#ServiceStatus1').show();
     }else{
        $('#ServiceStatus1').hide();
     }
  }

  $('#acf-field_5bf80363f0c0f').ready(addServiceStatusClass);
  $('#acf-field_5bf80363f0c0f').change(addServiceStatusClass);

});

示例： http://jsfiddle.net/m2o361th/3/

提醒一下，如果您使用的是WordPress随附的jQuery版本，则必须将函数包装在映射到jQuery的函数中：

(function($){
    // contains one of the above functions...
})( jQuery );

Answer 2

非常感谢您的支持。我已经对您上面的代码进行了调整，以将选择字段设置为后端，而我的div设置为前端。工作代码是...

$(function() {

function addServiceStatusClass(e){
if($('#Multistream').text() != 'No Issues'){
    $('#ServiceStatus1').addClass('Error');
 }else{
    $('#ServiceStatus1').removeClass('Error');
 }
}

 $('#acf-field_5bf80363f0c0f').ready(addServiceStatusClass);
 $('#acf-field_5bf80363f0c0f').change(addServiceStatusClass);

});
})( jQuery );

如果值不相等，则ACF选择值将类添加到div

2 个答案: