Javascript Jquery制作放大和缩小文本的按钮

我在这里已经讨论了几个类似的问题，但由于我对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不起作用。这并不奇怪，因为我对JS也不太了解

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

---

谢谢大家的帮助，谢谢

如果使用jQuery，可以添加一个.click（function（e）{}）监听器，并使用它来更改特定元素中文本的大小。比如

<div id='textDiv'> <p> Just some text </p> </div>
<button id='textSmallerButton'>smaller text</button>

<script type='text/javascript'>
   $("#textSmallerButton").click(function(e) {
       $("#textDiv").css("font-size", "12px");
   });
</script>

只是一些文本

小文本
$（“#文本小按钮”）。单击（函数（e）{
$（“#textDiv”）.css（“字体大小”，“12px”）；
});

（较大的字体基本相同，只是其他字体大小） 只需记住设置正确的ID:）

---

我希望这将对您有所帮助：）

您可以更改对象的类

function button1Click(){
    $(this).removeClass("normal small").addClass("large");
}
function button2Click(){
    $(this).removeClass("normal large").addClass("small");
}

您可以使用“css”属性

例如：

$("#changeable").css({"font-size":"12px"});

---

您的代码中有几个问题

要调用的函数是

document.getElementsByClassName（）

，而不是

getElementsByClassName

它返回一个集合，而不是单个元素。要更改集合中的所有元素，需要编写一个循环

在

normal.style、.fontsize

中有一个额外的逗号

因为您使用的是jQuery，所以可以简化它，因为它会自动为您进行迭代

$(document).ready(function() {
    $("#button1").click(function() {
        var change = $("#changeable");
        if (change.hasClass("small")) {
            change.toggleClass("small normal");
        } else if (change.hasClass("normal")) {
            change.toggleClass("normal large");
        }
    });
    $("#button2").click(function() {
        var change = $("#changeable");
        if (change.hasClass("large")) {
            change.toggleClass("large normal");
        } else if (change.hasClass("normal")) {
            change.toggleClass("normal small");
        }
    });
});

1） 没有名为“GetElementByClassName”的JS方法-有

getElementsByClassName（）

或

getElementById（）

。注意方法名-它们区分大小写，很容易混淆

当您想要返回一个唯一的元素时，请使用“Id”（因为Id在页面上应该是唯一的，对吗？），并使用“elements（复数）”ByClassName返回具有该特定类的每个元素-页面上可能有1000个内容

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

您可以在HTML中对此进行硬编码，就像您在第一个div中添加

class=“normal”

一样。。。或者可以动态添加/删除/切换类

这种方法非常适合将JS、CSS和HTML分开。正如您已经注意到的那样，直接访问

.style

或使用

.css（）

方法等替代方法往往会混淆问题

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

使用jQuery，您可以使用：

$（.yourClassName”）.on（'click'，function（）{//dostuff here}）

或者使用快捷方式
。单击（someFunction（））
，也可以执行相同的操作

4） 您知道如何使用控制台或在Firebug之类的检查器中设置断点来检查/调试代码中的错误吗？仔细研究一下，这样你就可以找出你的代码在哪里被破坏，并从那里确定原因

5） 如果您不理解JS或jQuery，请阅读文档。Mozilla开发者网络是一个很好的JS资源。jQuery文档位于此处：。如果这些没有意义（一开始不会），那么网上有很多教程可以帮助你解释——Lynda.com、Treehouse、tuts+，等等。请别人帮你做作业后复制/粘贴不会教你很多东西。如果这是你真正想学的东西，试着去理解事情是如何运作的&为什么——而不仅仅是做什么。祝你好运
 第一件事优先：

在HMTL中的
=
符号周围添加空格并不常见——虽然在技术上没有错误——它在每一行上使用了大量的空格，而且很难阅读，因为很难看到每个属性的起始位置：

<div class = "something" id = "other">
<div class="something" id="other">

jQuery将这些CSS选择器表达式转换为对内置
文档.querySelectorAll
，
文档.getElementById
的调用。。。功能。这里的神奇之处在于，我们不需要担心旧浏览器可能不包含臭名昭著的DOMAPI的某些部分，jQuery将为我们解决这个问题（至少希望如此）

让我们一行一行地看一下我们将如何为缩小和放大按钮添加功能：

// Run this when the page is fully loaded and ready
$(function(){

    // We get the element with the Id changeable
    var $changeable = $("#changeable");

    // lets create an event handler for the enlarge button
    $("#button1").click(function(){
        // we check if changeable is small and save the value so 
        // we remember what state our text has even if we reset it
        var isSmall = $changeable.hasClass('small');
        // lets reset everything just to be sure
        $changeable.removeClass('small normal large');
        // This lets us "step" up to normal size if the text is small 
        // instead of going directly from small to large
        if (isSmall) {
            $changeable.addClass('normal');
        } else {
            $changeable.addClass('large');
        }
    });

    // Event handler for the shrink button - the same as enlarge but opposite 
    $("#button2").click(function(){
        var isLarge = $changeable.hasClass('large');
        $changeable.removeClass('small normal large');
        if (isLarge) {
            $changeable.addClass('normal');
        } else {
            $changeable.addClass('small');
        }
    });
}); 

您可以尝试一下，并看到一些测试，这些测试证明它按照我们在本JSFIDLE中的预期工作。
什么是GetElementByClassName@Alexander编辑帖子时请不要更改OP的原始代码，除非你正在格式化它我还没有尝试过，但我觉得它很完美，作为一个不知道自己在说什么的人，这是令人兴奋的！！当我把你的答案翻译成我的文档时，我有点困惑，因为我应该把我的CSS和JS与我的HTML分开，看起来你的答案是如何在一个文档上完成这一切。我知道当你把所有的东西都分开的时候会发生一些小的变化，我只是不知道如何翻译它…只是在HTML的开头包含javascript，但是要小心，你可能需要添加
$（document）.ready（function（）{-javascript-}）呼叫以确保按钮工作。也许我只是愚蠢，你的代码似乎我可以插入（基本上像复制和粘贴），它应该工作得很好，但当我尝试时，它不工作，我不明白为什么。我已经看过了，所有的名称、ID和类名都是正确的，这对我来说似乎是有意义的，但不管出于什么原因，它都不起作用。对不起，您是否将它放入了
$（document）.ready（）
函数中
$("#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); 

});

<div class = "something" id = "other">
<div class="something" id="other">

<input type="button" id="button1" value="Enlarge"></input>
<input type="button" id="button2" value="Shrink"></input>

$('#button1'); // jQuery Gimme an element with the ID of 'button1' if you please 
$('.icecream'); // all elements with the class 'icecream'
$('.icecream.vanilla'); // with the class 'icecream' and 'vanilla'

// Run this when the page is fully loaded and ready
$(function(){

    // We get the element with the Id changeable
    var $changeable = $("#changeable");

    // lets create an event handler for the enlarge button
    $("#button1").click(function(){
        // we check if changeable is small and save the value so 
        // we remember what state our text has even if we reset it
        var isSmall = $changeable.hasClass('small');
        // lets reset everything just to be sure
        $changeable.removeClass('small normal large');
        // This lets us "step" up to normal size if the text is small 
        // instead of going directly from small to large
        if (isSmall) {
            $changeable.addClass('normal');
        } else {
            $changeable.addClass('large');
        }
    });

    // Event handler for the shrink button - the same as enlarge but opposite 
    $("#button2").click(function(){
        var isLarge = $changeable.hasClass('large');
        $changeable.removeClass('small normal large');
        if (isLarge) {
            $changeable.addClass('normal');
        } else {
            $changeable.addClass('small');
        }
    });
});