文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >开关语句jQuery不适用于单选按钮值

问开关语句jQuery不适用于单选按钮值
EN

Stack Overflow用户
提问于 2016-03-29 04:44:27
回答 3查看 176关注 0票数 0

我正在尝试使用AngularJS构建一个小应用程序，它将允许我改变字体，并使用单选按钮查看它在相邻的文本区域中的外观。我有字体的值通过，但开关语句似乎没有得到任何情况。请参阅我的代码如下：

代码语言：javascript
复制
 <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>

​

联合来文：

代码语言：javascript
复制
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

angularjs
javascript
jquery
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-03-29 05:02:28

使用ng-change指令，因为您希望在更改radio按钮值时执行操作。

试试这个：

​

代码语言：javascript
复制
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);
  });
});
代码语言：javascript
复制
<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

票数 1
EN

Stack Overflow用户

发布于 2016-03-29 04:59:21

在获得单选按钮值方面有一些问题。

代码语言：javascript
复制
 $(':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');

        }
        }
    );

我希望这能帮上忙。

票数 0
EN

Stack Overflow用户

发布于 2016-03-29 05:02:20

另一种方法是使用类，不要在角控制器中执行dom操作

​

代码语言：javascript
复制
var radioForm = angular.module('radioForm', []);

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


});
代码语言：javascript
复制
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
}
代码语言：javascript
复制
<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:

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/36275625

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档