JQuery .addClass() 未应用 JQuery 中定义的样式

Question

这是一个

非常简单的问题，但我正在(尝试(编写一个JQuery插件，我只想使用JQuery。问题是，我为 .activediv 设置了一些样式(通过 JQuery(，并且在单击<div>时，它被赋予了一个类active - 我知道这一点，因为我检查了开发人员工具 - 但它没有给出样式。我尝试将类硬编码到<div>上，它工作正常。我还尝试用CSS而不是JQuery对样式进行硬编码，再次，它奏效了。有没有办法更新 JQuery - 单击<div> - 以便在单击<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');
});

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

Answer 2

$('div.active')在其

执行的确切时间内选择所有具有类.active的<div>元素。这意味着，当页面加载时，但是在加载页面时没有具有类.active的元素，因此不会设置任何元素的样式。当存在与上一个选择匹配的元素时，之后不会自动添加属性。

如果要向页面添加样式，则需要向 DOM 添加<style>属性。你可以这样做：

$('head').append('<style>div.active { border: 1px solid black; }</style>');

但是，我不会以编程方式添加样式表。尝试将样式添加到样式表文件中，并且仅切换类以编程方式进行更改。

---

这是工作示例：

$('head').append('<style>div.active { border: 1px solid black; }</style>');
$('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>

Answer 3

除了其他人的解释之外，单独放置CSS会起作用，

div.active {
    border: 1px solid red;
}
div {
    border: 1px solid green;
}

您的问题的工作演示在这里：JS小提琴