javascript - jquery制作放大缩小文字的按钮

Question

我已经在这里回答了几个类似的问题，但是由于我对 JavaScript 比较陌生，对 JQuery 也是全新的，所以我真的不知道我在做什么 :D

所以我的任务是制作两个带有文本的 div:

<div id = "changeable" class = "normal">
    <p>Blah blah blah blah blah blah blah</p>
</div>
<div id = "staysSame">
    <p>Bloo bloo bloo bloo bloo bloo bloo bloo bloo</p>
</div>

然后我应该制作两个带有事件处理程序的按钮，这些事件处理程序使用 JQuery/JavaScript/CSS 更改字体大小

<input type = "button" onclick = "button1Click()" id = "button1" value = "Enlarge"></input>
<input type = "button" onclick = "button2Click()" id = "button2" value = "Shrink"></input>

我应该为每种字体大小制作一个 CSS 页面(这正是我需要的，除了确切的字体大小)

.large{
    font-size: 20pt;
}
.normal{
    font-size: 14pt;
}
.small{
    font-size: 10pt;
}

因为我是 JQuery 的新手，所以我大部分时间都不知道如何使用它。所以现在我只有一些不起作用的 JavaScript。这并不奇怪，因为我对 JS 也不太了解 wooooo

var large = GetElementByClassName("large");
var normal = GetElementByClassName("normal");
var small = GetElementByClassName("small");

function button1Click(){
    normal.style.fontsize = large.style.fontsize;
}
function button2Click(){
    normal.style,.fontsize = small.style.fontsize;
}

感谢所有的帮助!

Answer 1

1) 没有名为“GetElementByClassName”的 JS 方法 - 有 getElementsByClassName() 或 getElementById()。注意方法名称 - 它们区分大小写并且容易混淆。

当您想要返回单个唯一元素时使用“Id”(因为 ID 在页面上应该是唯一的，对吧？)，以及“elements(复数)”ByClassName 返回具有该特定类的每个元素 - 可以是一页上有 1000 件事。

2) 您还没有将“大”或“小”CSS 类应用到 HTML 中的 div。 JS/jQuery 查看 HTML“文档对象模型”及其包含的内容。它不知道也不关心 CSS 文件，这似乎是您处理它的方式。在您首先将该类应用于文档中的元素之前，尝试获取带有这些类名的元素不会返回任何您可以使用的内容。

您可以在 HTML 中对其进行硬编码，就像您通过将 class="normal" 添加到第一个 div 所做的那样...或者您可以添加/删除/切换类动态 with jQuery:

$("#button1").click(function(){
   //play w/toggleClass() as well as chaining multiple jQuery methods
   //like .addClass() and .removeClass() to get the effect you want
   //read the jQuery documentation for examples & details.    

    $("#changeable").toggleClass(normal small); 

});

这种方法非常适合将 JS、CSS 和 HTML 分开。正如您已经注意到的，直接访问 .style 或使用 .css() 方法等替代方案往往会混淆。

3) 使用像“onclick()”这样的内联 JS 处理程序很容易，但是这种做法已经过时了，因为维护起来很痛苦(想象一个带有 100 个按钮的 HTML 页面，然后您需要更改所有按钮。 ..).首选方法是使用事件监听器。

借助 jQuery，您可以使用:

$(".yourClassName").on('click', function() {//dostuff here});

或者快捷方法 .click(someFunction()) 做同样的事情。

4) 您知道如何使用控制台或在 Firebug 等检查器中设置断点来检查/调试您的代码是否有错误吗？调查一下，这样您就可以找出您的代码在哪里出错，并从那里确定原因。

5) 如果您不懂 JS 或 jQuery，请阅读文档。 Mozilla Developer Network 是一个很好的 JS 资源。 jQuery 文档在这里:http://api.jquery.com/ .如果这些没有意义(他们一开始不会)，有大量在线教程可以帮助解释它 - Lynda.com、Treehouse、tuts+ 等。请别人为你完成作业后复制/粘贴不会教你很多东西。如果这是您真正想学习的东西，请尝试了解事物的运作方式和原因——而不仅仅是做什么。祝你好运!