Question

我有问题在加载页面时显示选项类默认值并替换类默认值？首先，我是新手。这是我的代码

function myView(sel) {
$("#colomView").addClass(sel.value);
};
function myView2(sel) {
$("#colomView").addClass(sel.value);
};

.redBG {
    background-color:red;
    padding:10px;
}
.blueBG {
    background-color:blue;
    padding:10px;
}
.redBOX{
    border:1px solid red;
}
.blueBOX{
    border:1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colomView" class="">
    <p>HERE DEFAULT TEXT</p>
    <select onchange="myView(this);">
        <option selected="selected" value="redBG">redBG</option>
        <option value="blueBG">blueBG</option>
    </select>
    <select onchange="myView2(this);">
        <option selected="selected" value="redBOX">redBG</option>
        <option value="blueBOX">blueBG</option>
    </select>
</div>

问题：如何从attr替换类？如果我点击blueBOX然后我点击redBOX，结果将是class =“blueBOX redBOX”。

请帮忙解决我的问题？谢谢

Answer 1

要使用jQuery，您需要包含它。然后你可以使用：

$("#colomView").removeClass('redBG blueBG').addClass(sel.value);

如果不需要在此元素上设置其他类。
http://jsfiddle.net/wuj5tfwo/

如果你想切换＆＃39;只有这两个特定的类，那么你可以使用：

/**
 * @ngdoc directive
 * @name angular-uploadcare.directive:Uploadcare
 * @description Provides a directive for the Uploadcare widget.
 * # Uploadcare
 */
angular.module('ng-uploadcare', [])
  .directive('uploadcareWidget', function () {
    return {
      restrict: 'E',
      replace: true,
      require: 'ngModel',
      template: '<input type="hidden" role="ng-uploadcare-uploader" />',
      scope: {
        onWidgetReady: '&',
        onUploadComplete: '&',
        onChange: '&',
      },
      controller: ['$scope', '$element', '$log', function($scope, $element, $log) {
        if(!uploadcare) {
          $log.error('Uploadcare script has not been loaded!.');
          return;
        }
        $scope.widget = uploadcare.Widget($element);
        $scope.onWidgetReady({widget: $scope.widget});
        $scope.widget.onUploadComplete(function(info) {
          $scope.onUploadComplete({info: info});
        });
        $scope.widget.onChange(function(file) {
          // add data binding for hidden inputs
          $scope.$apply(function () {
            $parse($attrs.ngModel).assign($scope.$parent, $element.val());
          });
          $scope.onChange({file: file});
        })
      }]
    };
  });

Answer 2

首先更改所选的框，你必须删除'colomView'div的class属性中存在的所有类，然后你必须分配所选的选项类，

试试这段代码，

function myView(sel) {
    $("#colomView").attr('class',sel.value);
};

Answer 3

请查看fiddle。

您应该使用attr('class', className); className将是您要分配的类的名称，以替换默认类。

希望它有所帮助。

如何更改或替换类attr？

3 个答案: