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

Question

我正在尝试将一个类添加到一个数组元素，它是一个特定的字符，在该字符的按键上。预期的结果是，如果按下“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); 
        } 
  }
})

Here 也是一个小提琴。

Answer 1

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

Answer 2

将它们包装在一个跨度中，给它们一个唯一的键来查找键，然后在选择器中使用该键来选择元素。

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>

Answer 3

问题：

1. 只有 jQuery 对象有方法 .addClass() 并且您尝试从字符串中调用它。您需要将每个字母作为一个类分配给单个元素。
2. 在您的情况下，.split() 必须有一个空格：.split(" ")

Answer 4

我会做什么：

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>

（另见this Fiddle）

Answer 5

你这里的逻辑有点缺陷。将每个字符附加到自己的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!');
    }
})

Working fiddle