Question

当我点击其中一个按钮时，我希望段落根据我点击的按钮改变大小。这似乎不起作用。我已经检查了所有内容，并且凭借我对jQuery（初学者）的知识水平，我无法弄明白，所以我需要你的帮助。这是代码：

<!DOCTYPE html> 
<html lang="en">

<head>
<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <input type="button" id="smaller" value="smaller text" />
    <input type="button" id="bigger" value="bigger text" />
    <p > Some text inside of it.</p>
    <p > Some text inside of it too!</p>


    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="query.js"> </script>
</body>

</html>

的jQuery

$('#bigger').click(function() {
    $('p').addClass('.bigger');
});

$('#smaller').click(function() {
    $('p').addClass('.smaller');
});

CSS

.bigger {
    font-size:30px;
    background-color:red;

}
.smaller {
    font-size:10px;
}

Answer 1

从.删除addClass()，因为该函数已经将字符串识别为类而没有指定类选择器。

试试这个：

$('#bigger').click(function() {
    $('p').addClass('bigger'); //instead of .bigger
});

$('#smaller').click(function() {
    $('p').addClass('smaller'); //instead of .smaller
});

DEMO

Answer 2

请记住$.addClass("bigger");而不是$.addClass(".bigger");

演示

http://jsfiddle.net/dieegov/ebGQ2/

单击按钮时jQuery添加类

2 个答案: