Question

我正在尝试更改按钮的样式（实际上只是div）。我可以使用.classname:active在CSS中执行此操作，但按钮仅在单击时更改样式;点击发布后，它不会保持样式更改。所以，我决定使用jQuery来操作CSS。值得注意的是，我在我的应用程序中也使用了Bootstrap和Angular。

HTML

<div class="subcontainer">
    <div class="center" data-container="body" popover-template="'popover-template.html'"> 
        {{instance}}
    </div>
</div>

的jQuery

$(document).ready(function() {
    $(".subcontainer").click(function() {
        $(this).css("border", "1px inset gray");
    });
});

我也尝试过使用$(".subcontainer").on("click", function () { ... });，但无济于事。我查看了jQuery用户界面，但我认为它没有快速解决我想要实现的目标，所以我想坚持使用简单的jQuery。

编辑：

上面的代码适用于未嵌套在ng-repeat内的所有元素。我试图解决为什么它不适用于ng-repeat内的那些元素。

如果您尝试将注入jQuery用于AngularJS指令，请参阅https://stackoverflow.com/questions/31972784/injecting-jquery-into-angularjs-directive。

Answer 1

问题是这个指针。试试这个内容：

$(".subcontainer").click(function(e) {
    $(e.target).css("border", "1px inset gray");
});

这会将一般事件信息传递给e，然后您可以使用e.target获取事件的目标。

编辑：在上面的伍德罗评论中，你可以这样做但是使用＆＃39; .addClass（＆＃39; isactive＆＃39;）＆＃39;而不是直接的CSS操纵。这里的主要好处是以后使用＆＃39; .removeClass（＆＃39; isactive＆＃39;）＆＃39;

更容易删除

Answer 2

当你使用带有角度的Jquery时，索引页面中的源代码必须首先是Jquery，然后是角度，如下所示：

<script src ="bower_components/jquery/dist/jquery.js"></script>
<script src ="bower_components/angular/angular.js"></script>

您需要将$（“。subcontainer”）用于angular.element（'。subcontainer'）。如果没有，当你运行“grunt serve”时，你可能会收到警告或错误。

希望它有所帮助。

Answer 3

尝试这样;

HTML

<div class="subcontainer">
    <div class="center" data-container="body" popover-template="'popover-template.html'"> 
        BUTTON
    </div>
</div>

js使用jquery

$( ".subcontainer" ).click(function() {

    $(this).addClass("green");

});

css

.subcontainer
{
    background-color:red;
    width:120px;
    height:auto;
    display:block;
}
.green
{
   background-color:green; 
}
.center
{
    padding:10px;
    text-align:center;
}

这里是小提琴link

在示例中，我只是更改按钮颜色，但您可以将动态设置类配置为具有任意样式值。

Answer 4

您可以使用AngularJS和CSS更改CSS类的属性，不需要jQuery。有关详细信息，请参阅this。请注意，您甚至不需要像OP那样的控制器。

<div ng-class="{'gray-inset-border': style}">
    <div ng-click="style=!style">
        Content
    </div>
</div>

jQuery：操纵CSS

4 个答案: