Javascript-尝试使用switch语句

Javascript - Trying to use a switch statement

本文关键字：switch 语句 Javascript-      更新时间：2023-09-26

我对在HTML中使用带javascript的开关很陌生。我正在尝试制作一个文本放大程序，根据用户的选择，文本可以放大或变小。目前，当你点击其中一个按钮时，什么都不会发生。我不知道如何让开关工作。如果有人能帮忙，我们将不胜感激。感谢

这是我的代码：

    <!DOCTYPE html>
    <html>
    <head>
    <title> Changing the size of the text </title>
    <script>
    switch resize(size) {
    case S:
        if (document.getElementById("change").style.fontSize == "") {
                document.getElementById("change").style.fontSize = "1.0em";
        break;
        }
    case L:
        if (document.getElementById("change").style.fontSize == "") {
                document.getElementById("change").style.fontSize = "-1.0em";
        break;
        }
    default:
        document.body.style.fontSize = "";
    }
    document.getElementById("change").style.fontSize = parseFloat    (document.getElementById("change").style.fontSize) + (size * 0.1) + "em";
    </script>
        </head>
<body>
<a href="#" onclick="resize(1);">A+</a> 
<a href="#" onclick="resize(-1);">A-</a>
<p id="change">Text Size Change!</p>
</body>
</html>

我看到你使用的是变量而不是字符串，也许这就是问题所在，尝试更改以下行：

case S:
case L:

至

case 'S':
case 'L':

或者用所需的值声明变量S和L。

应该是

switch (size) {

而不是

switch resize(size) {

此外，break应该在IF大括号之外。

您必须定义调整大小函数，而不是直接在开关情况中使用它

中断不应该在"if"语句中

以下是一个工作演示：http://fiddle.jshell.net/L57hee8v/1/

它背后的整个逻辑应该改变。下面是一个工作示例。

JSFiddle

var ch = $('#change');
var changeAmount = 8;
/*Resized the change element based by changeAmount*/
function resizeMe(size) {
    ch.css('font-size', parseInt(ch.css('font-size')) + (size * changeAmount) + "px");
}
/*binds the click event to every `a` */
$('a').click(function () {
    resizeMe($(this).data('size'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-size='1'>A+</a> 
<a href="#" data-size='-1'>A-</a>
<p id="change">Text Size Change!</p>

我认为您需要学习一些基础知识。但现在你可以试试这个，

这只是增加一次，然后减少一次。

<!DOCTYPE html>
    <html>
    <head>
    <title> Changing the size of the text </title>
    <script>
    function resize(size) {
      if(document.getElementById("change") && document.getElementById("change").style) {
      switch (size) {
        case 'L':
          document.getElementById("change").style.fontSize = "2.0em";
          break;
        case 'S':   
          document.getElementById("change").style.fontSize = "1.0em";
          break;
        default:
          document.body.style.fontSize = "";
        }
      }
    }
    </script>
        </head>
<body>
<a href="#" onclick="resize('L');">A+</a> 
<a href="#" onclick="resize('S');">A-</a>
<p id="change">Text Size Change!</p>
</body>
</html>

这是为了如果你想继续增加或减少字体大小

<!DOCTYPE html>
        <html>
        <head>
        <title> Changing the size of the text </title>
        <script>
          document.getElementById("change").style.fontSize = "20px";
        function resize(size) {
          if(document.getElementById("change") && document.getElementById("change").style) {
          var fontSize = document.getElementById("change").style.fontSize;
          var fontValue = Number(fontSize.substring(0, fontSize.length-2));
          var changeInPx = 4;
          switch (size) {
            case 'L':
              document.getElementById("change").style.fontSize = (fontValue+changeInPx)+"px";
              break;
            case 'S':   
              document.getElementById("change").style.fontSize = (fontValue-changeInPx)+"px";
              break;
            default:
              document.body.style.fontSize = "";
            }
          }
        }
        </script>
            </head>
    <body>
    <a href="#" onclick="resize('L');">A+</a> 
    <a href="#" onclick="resize('S');">A-</a>
    <p id="change">Text Size Change!</p>
    </body>
    </html>
相关文章：