将 CSS 类添加到数组中的单个元素

Add a CSS class to a single element in an array

本文关键字：单个 元素 数组 CSS 添加      更新时间：2023-09-26

我正在尝试在按下该字符时将一个类添加到数组元素中，这是一个特定的字符。预期的结果是，如果按下键"y"，类"selected"将仅添加到数组中的"y"中，这将改变它的颜色并在它之间划一条线。

我设置了一个按键事件，我可以将类添加到整个div 中，其中数组已在按键时附加，但我无法弄清楚如何在该字符的按键时将类添加到数组中的单个元素。

<小时 />

我的JS代码：

var $arr = "a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 ".split("");
$('#characters').append($arr);
$(document).keypress(function(event) {
  var pressed = event.keyCode;
  var alreadyPressed = [];
  var pressedChar = String.fromCharCode(pressed);
  console.log(pressedChar, pressed);
  for (i = 0; i <= $arr.length; i++) {
    var arrCharacter = $arr[i];
    if((arrCharacter === pressedChar) && (jQuery.inArray(pressed, alreadyPressed) === -1)) { 
          $(this).addClass("selected");
            alreadyPressed.push(pressed); 
        } 
  }
})

这里也是一个小提琴。

var $arr = "a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 ".split("");
$.each($arr, function(index,elem){
    console.log(elem);
    $('#characters').append("<span id='"+elem+"'>"+elem+"</span>");
});
//$('#characters').append($arr);
$(document).keypress(function(event) {
  var pressed = event.keyCode;
  var alreadyPressed = [];
  var pressedChar = String.fromCharCode(pressed);
  console.log(pressedChar, pressed);
  for (i = 0; i <= $arr.length; i++) {
    var arrCharacter = $arr[i];
    if((arrCharacter === pressedChar) && (jQuery.inArray(pressed, alreadyPressed) === -1)) { 
          $("#"+pressedChar).addClass("selected");
            alreadyPressed.push(pressed); 
        } 
  }
})

将它们包装在一个范围中，为它们提供一个唯一的键来查找键，然后在选择器中使用该键来选择元素。 

var arr = "abcdefghijklmnopqrstuvwxyz0123456789".split("");
var html = arr.reduce( function (str, txt) { return str +  '<span data-id="' + txt + '">' + txt + '</span>'  }, "");
$("#out").html(html);
$(window).on("keypress", function(evt) {
      var strChar = String.fromCharCode(evt.which).toLowerCase();
      $('span[data-id="' + strChar + '"]').addClass("selected");
});
.selected {
    color: green;
    background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="out"></div>

问题：

  1. 只有 jQuery 对象具有方法.addClass()，您尝试从字符串调用它。您需要将每个字母作为一个类分配给单个元素。
  2. 在你的例子中，.split（） 里面必须有一个空格：.split(" ")
我会

做什么：

  1. 将所有字母放在单独的<span>元素中
  2. 按字母键时将所选类添加到相应的 <span> 元素

查看下面的演示，了解最佳实现。

演示

var arr = "abcdefghijklmnopqrstuvwxyz0123456789".split("");
var $characters = $('#characters');
var alreadyPressed = [];
$.each(arr, function(key, value){
    $characters.append("<span id='span" + value + "'>" + value + "</span>");
});
$(document).keypress(function(event) {
    var pressedChar = String.fromCharCode(event.keyCode);
    if($.inArray(pressedChar, arr) !== -1 && $.inArray(pressedChar, alreadyPressed) === -1) { 
        $("#span" + pressedChar).addClass("selected");
        alreadyPressed.push(pressedChar); 
    } 
});
.container {
    color: gray;
}
#characters {
    font-size: 30px;
}
.selected {
    color: orange;
    text-decoration: line-through;
}
[id^=span] {
    padding-right: .4em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="container">
    <h1>Superfun Typing Game </h1>
    <p>To win, type every letter from a-z and every number from 0-9.</p>
    <div id="characters"></div>
</div>

（另见这首小提琴）

你这里的逻辑有点缺陷。将每个字符附加到其自己的span元素中会简单得多，以便在按下按键时可以轻松找到它。您还可以使用类在按键时标识 span 元素，而不必维护单独的数组。这允许您直接使用 DOM 来维护状态，而不必跟踪该数组已按下和未按下的内容。因此，您可以通过将字符跨度的总数与具有selected类的字符跨度的数量进行比较来轻松判断何时按下了所有键。

考虑到所有这些，请尝试以下操作：

var charArr = 'abcdefghijklmnopqrstuvwxyz0123456789'.split('');
var charHtml = '';
for (var i = 0; i < charArr.length; i++) {
    charHtml += '<span class="char_' + charArr[i] + '">' + charArr[i] + '</span>';
}
$('#characters').append(charHtml);
$(document).keypress(function(e) {
    var $characters = $('#characters span');
    $characters.filter('.char_' + String.fromCharCode(e.which)).addClass('selected');    
    if ($characters.length == $characters.filter('.selected').length) {
        alert('All selected!');
    }
})

工作小提琴

相关文章：