Question

我是新手在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>

Answer 1

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

case S:
case L:

到

case 'S':
case 'L':

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

它应该是

switch (size) {

而不是

switch resize(size) {

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

Answer 2

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

这只会增加一次然后减少一次。

<!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>

Answer 3

您必须定义调整大小功能，而不是直接在开关案例中使用

休息不应该在＆＃34;如果＆＃34;语句

这是一个有效的演示：http://fiddle.jshell.net/L57hee8v/1/

Answer 4

应该改变它背后的整个逻辑。这是一个有效的例子。

JSFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Javascript - 尝试使用switch语句

4 个答案: