Оператор переключения jQuery не работает для значений переключателей

Question

Оператор переключения jQuery не работает для значений переключателей

0

Я пытаюсь создать небольшое приложение с помощью AngularJS, которое позволит мне изменить шрифт и посмотреть, как он выглядит в соседнем текстовом поле с помощью переключателей. У меня есть значения для входящих шрифтов, но оператор switch, похоже, не подбирает ни один из этих случаев. Посмотрите мой код ниже:

 <body ng-app="radioForm">
   <div class="container">
      <div class="row" ng-controller="fontController as fontController">
        <h1>Find Me a Font</h1>
          <div class="child">
            <div class="col-xs-6">
              <form role="form">
                <div class="radio">
                    <label id="fairytales">
                        <input type="radio" name="font" ng-model="formData.font" value="fairytales">
                            Fairytales
                    </label>
                </div>
                <div class="radio">
                    <label id="stump-closed">
                        <input type="radio" name="font" ng-model="formData.font" value="stump-closed">
                            Stump-Closed
                    </label>
                </div>
                <div class="radio">
                    <label id="amelia">
                        <input type="radio" name="font" ng-model="formData.font" value="amelia">
                        Amelia
                    </label>
                </div>
                <div class="radio">
                    <label id="brixton-lt">
                        <input type="radio" name="font" ng-model="formData.font" value="brixton-lt">
                        Brixton-LT
                    </label>
                </div>
                <div class="radio">
                    <label id="grounday">
                        <input type="radio" name="font" ng-model="formData.font" value="grounday">
                        Grounday
                    </label>
                </div>
            </form>
        </div>
        <div class="col-xs-6">
            <textarea>{{formData.font}}</textarea>
        </div>
    </div>
   </div>
 </div>

JS:

var radioForm = angular.module('radioForm', []);

    radioForm.controller('fontController', function($scope){
        $scope.formData = {
        };

        var chosenFont = $scope.formData.font;

        switch (chosenFont){
            case "fairytales":
                $('input[type=text], textarea').css('font-family', 'fairytales');
                break;
            case "stump-closed":
                $('input[type=text], textarea').css('font-family', 'stump-closed');
                break;
            case "amelia":
                $('input[type=text], textarea').css('font-family', 'Amelia-script');
                break;
            case "brixton-lt":
                $('input[type=text], textarea').css('font-family', 'brixton-lt');
                break;
            case "grounday":
                $('input[type=text], textarea').css('font-family', 'brixton-lt');
                break;
            default:
                $('input[type=text], textarea').css('font-family', 'sans-serif');

        }

        $( "input" ).on( "click", function() {
            console.log($scope.formData.font);
        });


    });

Вот код: http://codepen.io/tracyalison11/pen/BKZExL

tracyak13 29 март 2016, в 07:06

Источник

1

$scope.formData.font и chosenFont - ничто, поскольку вы определяете пустой $scope.formData непосредственно перед назначением ... попробуйте просто не назначать новый объект первым ...
dandavis 29 март 2016, в 04:49
0

оператор switch должен быть внутри обработчика клика
Arun P Johny 29 март 2016, в 04:51
0

я хотел бы представить, что что-то еще изменит это к тому времени, когда ввод click () ed; все может изменить $ scope в угловых ,,,
dandavis 29 март 2016, в 04:53
0

@ArunPJohny, это имеет смысл! Я попробовал это, хотя, и это все еще по умолчанию ...
tracyak13 29 март 2016, в 04:53
0

@ArunPJohny, точнее ng-change я думаю ...
Rayon 29 март 2016, в 04:54
0

@dandavis необходимо связать значения переключателей. Смотрите здесь в угловых документах для переключателей: docs.angularjs.org/api/ng/input/input%5Bradio%5D
tracyak13 29 март 2016, в 04:59
0

это не то же самое, что, я думаю, вы хотите, и я согласен с моей оценкой того, что показанный код не может работать так, как ожидалось, по причинам, которые я описал.
dandavis 29 март 2016, в 05:11

Показать ещё 5 комментариев

Теги:

javascript

jquery

angularjs

3 ответа

0

Ну, есть проблема с получением значения переключателя.

 $(':radio').change(
        function(){
         switch (this.value){
            case "fairytales":
                $('input[type=text], textarea').css('font-family', 'fairytales');
                break;
            case "stump-closed":
                $('input[type=text], textarea').css('font-family', 'stump-closed');
                break;
            case "amelia":
                $('input[type=text], textarea').css('font-family', 'Amelia-script');
                break;
            case "brixton-lt":
                $('input[type=text], textarea').css('font-family', 'brixton-lt');
                break;
            case "grounday":
                $('input[type=text], textarea').css('font-family', 'brixton-lt');
                break;
            default:
                $('input[type=text], textarea').css('font-family', 'sans-serif');

        }
        }
    );

Я надеюсь, это поможет.

user5735741 29 март 2016, в 03:25

0

Другой способ сделать это - использовать классы, не выполнять манипуляции с dom в вашем угловом контроллере

var radioForm = angular.module('radioForm', []);

radioForm.controller('fontController', function($scope) {
  $scope.formData = {};


});

input[type="text"],
textarea {
  font-family: sans-serif
}
.fairytales input[type="text"],
.fairytales textarea {
  font-family: fairytales
}
.stump-closed input[type="text"],
.stump-closed textarea {
  font-family: stump-closed
}
.amelia input[type="text"],
.amelia textarea {
  font-family: Amelia-script
}
.brixton-lt input[type="text"],
.brixton-lt textarea {
  font-family: brixton-lt
}
.grounday input[type="text"],
.grounday textarea {
  font-family: brixton-lt
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="radioForm">
  <div class="container">
    <div class="row" ng-controller="fontController as fontController" ng-class="formData.font">
      <h1>Find Me a Font</h1>
      <div class="child">
        <div class="col-xs-6">
          <form role="form">
            <div class="radio">
              <label id="fairytales">
                <input type="radio" name="font" ng-model="formData.font" value="fairytales">Fairytales
              </label>
            </div>
            <div class="radio">
              <label id="stump-closed">
                <input type="radio" name="font" ng-model="formData.font" value="stump-closed">Stump-Closed
              </label>
            </div>
            <div class="radio">
              <label id="amelia">
                <input type="radio" name="font" ng-model="formData.font" value="amelia">Amelia
              </label>
            </div>
            <div class="radio">
              <label id="brixton-lt">
                <input type="radio" name="font" ng-model="formData.font" value="brixton-lt">Brixton-LT
              </label>
            </div>
            <div class="radio">
              <label id="grounday">
                <input type="radio" name="font" ng-model="formData.font" value="grounday">Grounday
              </label>
            </div>
          </form>
        </div>
        <div class="col-xs-6">
          <textarea>{{formData.font}}</textarea>
        </div>
      </div>
    </div>
  </div>
  The JS:

Arun P Johny 29 март 2016, в 02:10

Ещё вопросы

$scope.formData.font и chosenFont - ничто, поскольку вы определяете пустой $scope.formData непосредственно перед назначением ... попробуйте просто не назначать новый объект первым ...
оператор switch должен быть внутри обработчика клика
я хотел бы представить, что что-то еще изменит это к тому времени, когда ввод click () ed; все может изменить $ scope в угловых ,,,
@ArunPJohny, это имеет смысл! Я попробовал это, хотя, и это все еще по умолчанию ...
@dandavis необходимо связать значения переключателей. Смотрите здесь в угловых документах для переключателей: docs.angularjs.org/api/ng/input/input%5Bradio%5D
это не то же самое, что, я думаю, вы хотите, и я согласен с моей оценкой того, что показанный код не может работать так, как ожидалось, по причинам, которые я описал.

Rayon · Accepted Answer · 2016-03-29T02-54-00.000Z

Используйте ng-change директивы, как вы хотите, действие произойдет, когда radio значение кнопки изменяется.

Попробуй это:

var radioForm = angular.module('radioForm', []);

radioForm.controller('fontController', function($scope) {
  $scope.formData = {};

  $scope.changeRadio = function() {
    switch ($scope.formData.font) {
      case "fairytales":
        $('input[type=text], textarea').css('font-family', 'georgia');
        break;
      case "stump-closed":
        $('input[type=text], textarea').css('font-family', 'Palatino Linotype');
        break;
      case "amelia":
        $('input[type=text], textarea').css('font-family', 'Times New Roman');
        break;
      case "brixton-lt":
        $('input[type=text], textarea').css('font-family', 'brixton-lt');
        break;
      case "grounday":
        $('input[type=text], textarea').css('font-family', 'Arial');
        break;
      default:
        ('input[type=text], textarea').css('font-family', 'Comic Sans MS');
    }
  }

  $("input").on("click", function() {
    console.log($scope.formData.font);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<div ng-app="radioForm">
  <div class="row" ng-controller="fontController as fontController">
    <h1>Find Me a Font</h1>
    <div class="child">
      <div class="col-xs-6">
        <form role="form">
          <div class="radio">
            <label id="fairytales">
              <input type="radio" name="font" ng-model="formData.font" value="fairytales" ng-change='changeRadio()'>Fairytales
            </label>
          </div>
          <div class="radio">
            <label id="stump-closed">
              <input type="radio" name="font" ng-model="formData.font" value="stump-closed" ng-change='changeRadio()'>Stump-Closed
            </label>
          </div>
          <div class="radio">
            <label id="amelia">
              <input type="radio" name="font" ng-model="formData.font" value="amelia" ng-change='changeRadio()'>Amelia
            </label>
          </div>
          <div class="radio">
            <label id="brixton-lt">
              <input type="radio" name="font" ng-model="formData.font" value="brixton-lt" ng-change='changeRadio()'>Brixton-LT
            </label>
          </div>
          <div class="radio">
            <label id="grounday">
              <input type="radio" name="font" ng-model="formData.font" value="grounday" ng-change='changeRadio()'>Grounday
            </label>
          </div>
        </form>
      </div>
      <div class="col-xs-6">
        <textarea>{{formData.font}}</textarea>
      </div>
    </div>
  </div>
</div>

Codepen