JavaScript-如何仅使用箭头键切换背景颜色的更改？-堆栈溢出

顺晟科技

2022-10-19 12:37:56

我正在尝试使此切换可访问，我已经成功地获得了切换开关的箭头键，但我无法更改h1的背景色，这违背了可访问切换的目的。我在这里做错了什么？我尝试使用keydwon侦听器，我从箭头键获得了输入，但没有从输入中接收到准确的数据属性。

我的代码：- HTML

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <title>Document</title>
</head>
<body>
    <h2>Three Pos</h2>
    <div class="container">
        
        <input data-type="first" type="radio" id="first" name="toggle_option2">
        <input data-type="second" type="radio" id="second" name="toggle_option2" checked>
        <input data-type="third" type="radio" id="third" name="toggle_option2">
        
        <label data-radio="first" for="first" class="radio one"><p>Lions</p></label>
        <label data-radio="second" for="second" class="radio bottom two"><p>Tigers</p></label>
        <label data-radio="third" for="third" class="radio three"><p>Bears</p></label>
        <div class="bg"></div>

    </div>

    <script src="app.js"></script>
</body>
</html>

CSS

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <title>Document</title>
</head>
<body>
    <h2>Three Pos</h2>
    <div class="container">
        
        <input data-type="first" type="radio" id="first" name="toggle_option2">
        <input data-type="second" type="radio" id="second" name="toggle_option2" checked>
        <input data-type="third" type="radio" id="third" name="toggle_option2">
        
        <label data-radio="first" for="first" class="radio one"><p>Lions</p></label>
        <label data-radio="second" for="second" class="radio bottom two"><p>Tigers</p></label>
        <label data-radio="third" for="third" class="radio three"><p>Bears</p></label>
        <div class="bg"></div>

    </div>

    <script src="app.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <title>Document</title>
</head>
<body>
    <h2>Three Pos</h2>
    <div class="container">
        
        <input data-type="first" type="radio" id="first" name="toggle_option2">
        <input data-type="second" type="radio" id="second" name="toggle_option2" checked>
        <input data-type="third" type="radio" id="third" name="toggle_option2">
        
        <label data-radio="first" for="first" class="radio one"><p>Lions</p></label>
        <label data-radio="second" for="second" class="radio bottom two"><p>Tigers</p></label>
        <label data-radio="third" for="third" class="radio three"><p>Bears</p></label>
        <div class="bg"></div>

    </div>

    <script src="app.js"></script>
</body>
</html>

编辑：-删除不必要的CSS，因为我无法发布整个内容

顺晟科技：

我想通了。如果其他人也面临同样的问题，这里有解决方案。

首先，从app.js中删除此代码:-

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <title>Document</title>
</head>
<body>
    <h2>Three Pos</h2>
    <div class="container">
        
        <input data-type="first" type="radio" id="first" name="toggle_option2">
        <input data-type="second" type="radio" id="second" name="toggle_option2" checked>
        <input data-type="third" type="radio" id="third" name="toggle_option2">
        
        <label data-radio="first" for="first" class="radio one"><p>Lions</p></label>
        <label data-radio="second" for="second" class="radio bottom two"><p>Tigers</p></label>
        <label data-radio="third" for="third" class="radio three"><p>Bears</p></label>
        <div class="bg"></div>

    </div>

    <script src="app.js"></script>
</body>
</html>

现在改为在app.js中添加此代码:-

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <title>Document</title>
</head>
<body>
    <h2>Three Pos</h2>
    <div class="container">
        
        <input data-type="first" type="radio" id="first" name="toggle_option2">
        <input data-type="second" type="radio" id="second" name="toggle_option2" checked>
        <input data-type="third" type="radio" id="third" name="toggle_option2">
        
        <label data-radio="first" for="first" class="radio one"><p>Lions</p></label>
        <label data-radio="second" for="second" class="radio bottom two"><p>Tigers</p></label>
        <label data-radio="third" for="third" class="radio three"><p>Bears</p></label>
        <div class="bg"></div>

    </div>

    <script src="app.js"></script>
</body>
</html>

问题是，通过使用keydown事件侦听器，我能够获取数据类型，但它是以前的状态。（例如，如果我单击了从tigers到bears，id将获得tigers的数据类型，而不是bdata类型的bears，这是我们当前切换到的位置。）

相反，使用change eventlistener，我们可以获得切换器锁定的当前数据类型。

上一篇：JavaScript-jQuery脚下一篇：HTML-调试JavaScript时

网站建设

Html

JavaScript-如何仅使用箭头键切换背景颜色的更改？-堆栈溢出