Question

这是一个非常简单的问题，但我（试图）编写一个JQuery插件，我只想使用JQuery。问题是，我为.active div设置了一些样式（通过JQuery），并且点击了<div>它给出了一个类active - 我知道这一点，因为我检查了开发人员工具 - 但它没有给出样式。我尝试将类硬编码到<div>上，并且工作正常。我也尝试用CSS代替JQuery来硬编码样式，并且再次起作用。有没有办法更新JQuery - <div>的onclick - 以便在单击<div>时应用样式？

＆＃13;

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

＆＃13;

<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>

＆＃13;

JSFiddle

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

由于

Answer 1

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

上面的逻辑在任何具有active类的div元素上放置内联样式，-at在该时间点 - 在DOM中。

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

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

Answer 2

$('div.active')会在其执行的确切时间内选择所有<div>个元素.active。这意味着，当页面被加载时，但在页面加载时没有元素具有类.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 fiddle

JQuery .addClass（）不应用JQuery中定义的样式

3 个答案: