单击按钮时无法增加字体大小答案

【问题标题】：Unable to increase font size on click of a button单击按钮时无法增加字体大小
【发布时间】：2014-09-15 12:55:58
【问题描述】：

我想在单击特定按钮时更改两个 div 的字体大小，但是按钮单击没有响应，请帮助。我在一个选择器中使用了两个 div ID。也请告诉我错误在哪里，下面是我的代码。

<html>

<head>
<title>
Example 2
</title>

<style>

    body
    {
        margin:10px 2em;
    }
    .switcher
    {
        float:right;
        margin:10px;
        background-color:#ddd;
        border: 1px solid #000;
        padding : 10px;
        font-size:0.9em;
    }

    .large
    {
        font-size:2em;
    }

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function{
        $('#switcher-large').on('click',function(){
            $('#header, #chapter-preface').addClass('large');
        });
    });
</script>
</head>

<body>
<div id="container">

      <div id="switcher" class="switcher">
        <h3>Style Switcher</h3>
        <button id="switcher-default">
          Default
        </button>
        <button id="switcher-narrow">
          Narrow Column
        </button>
        <button id="switcher-large">
          Large Print
        </button>
      </div>

      <div id="header">
        <h2>A Christmas Carol</h2>
        <h2 class="subtitle">In Prose, Being a Ghost Story of Christmas</h2>
        <div class="author">by Charles Dickens</div>
      </div>

      <div class="chapter" id="chapter-preface">
        <h3 class="chapter-title">Preface</h3>
        <p>I HAVE endeavoured in this Ghostly little book, to raise the Ghost of an Idea, which shall not put my readers out of humour with themselves, with each other, with the season, or with me.  May it haunt their houses pleasantly, and no one wish to lay it.</p>
        <p>Their faithful Friend and Servant,</p>
        <p>C. D.</p>
        <p>December, 1843.</p>
      </div>


</body>

</html>

【问题讨论】：

function{ 不是有效的 JavaScript，应该是 function() {。当某些东西不工作时，你应该检查你的调试控制台是否有错误。
对不起我的错误，谢谢:) @Blender

标签： javascript jquery html event-handling font-size

【解决方案1】：

试试这个

$('#header h2, #chapter-preface h3, #chapter-preface p').addClass('large');

【讨论】：

【解决方案2】：

你有一个语法错误

尝试替换

$(document).ready(function{

为

$(document).ready(function(){

【讨论】：

愚蠢的错误:(@pixelchild