javascript - JQuery .addClass() 不应用 JQuery 中定义的样式

Question

这是一个非常简单的问题，但我正在(尝试)编写一个 JQuery 插件，而且我只想使用 JQuery。问题是，我为 .active 设置了一些样式div(通过 JQuery)，然后单击 <div>它被赋予了一个类 active - 我知道这一点，因为我检查了开发人员工具 - 但没有给出样式。我尝试将类硬编码到 <div> 上，而且效果很好。我还尝试用 CSS 而不是 JQuery 对样式进行硬编码，再次，它成功了。有没有更新 JQuery 的方法 - <div> 的 onclick - 以便在 <div> 时应用样式被点击了吗？

$('div.active').css({
  'border-style':'solid',
	'border-width':'1px',
	'border-color':'black',
});
$('div').on('click',function(){
   $('div').removeClass('active');
    $(this).addClass('active');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">div 1</div>
<div class="div2">div 2</div>
<div class="div3">div 3</div>
<div class="div4">div 4</div>

JSFiddle

另外，你能解释一下为什么这对我不起作用吗？

谢谢

Answer 1

$('div.active').css({
  'border-style':'solid',
    'border-width':'1px',
    'border-color':'black',
});

上述逻辑将内联样式放在 DOM 中具有 active 类的任何 div 元素上，在那个时间点。

$('div').on('click',function(){
    $('div').removeClass('active');
    $(this).addClass('active');
});

上述逻辑只是围绕元素上的事件类移动。它不会自动移动内联样式。