jQuery:操纵 CSS

Question

我正在尝试更改按钮的样式(实际上只是一个 div)。我可以在 CSS 中使用 .classname:active 来实现，但是按钮只会在被点击时改变样式；单击释放后，它不会保持样式更改。所以，我决定使用 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 UI，但我认为它没有针对我想要实现的目标的快速修复解决方案，所以我想坚持使用普通 jQuery。

编辑:

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

参见 https://stackoverflow.com/questions/31972784/injecting-jquery-into-angularjs-directive如果您尝试将 jQuery 注入(inject)到 AngularJS 指令中。

Answer 1

问题是 this 指针。试试这个:

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

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

编辑:在上面 Woodrow 的评论中，您可以执行相同的操作，但使用 '.addClass('isactive')' 而不是直接的 css 操作。这里的主要好处是以后使用 '.removeClass('isactive')' 更容易删除