ACF Select value добавляет класс в div, если значение не равно - PullRequest
Новая
       6

ACF Select value добавляет класс в div, если значение не равно

0 голосов
/ 26 ноября 2018

Я впервые использую ACF и изо всех сил пытаюсь заставить это работать.Я создал поле Select с 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>

Я хотел бы добиться того, чтобы, если выбранная опция не равнялась No Issues, она добавлялапользовательский класс (.Error) для выбранного div, например, с идентификатором # ServiceStatus1.Я пытался с моим ограниченным знанием jQuery, но без радости.

Надеюсь, это имеет смысл, любой совет действительно ценится.

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

Ответы [ 2 ]

0 голосов
/ 27 ноября 2018

Большое спасибо за вышеизложенное.Я настроил ваш код выше, чтобы учесть, что поле выбора - это бэкэнд, а мой 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 );
0 голосов
/ 27 ноября 2018

Ваш вопрос и ваш код, похоже, задают разные вопросы ...

Если вы хотите добавить / удалить класс на основе значения в select, вы можете сделать: 

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

Также в качестве напоминания, если вы используете версию jQuery, включенную в WordPress, вы должны обернуть свои функции в функцию, сопоставленную с jQuery: 

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