Question

我正在尝试在该字符的按键上向数组元素添加一个类，该元素是一个特定字符。预期的结果是，如果关键＆＃34; y＆＃34;按下，班级＆＃34;选择＆＃34;将仅添加到＆＃34; y＆＃34;在数组中，它会改变它的颜色并在其中划一条线。

我有一个按键事件设置，我可以将类添加到整个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

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

＆＃13;

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

＆＃13;

.selected {
    color: green;
    background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="out"></div>

＆＃13;

Answer 2

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 3

我会做什么：

将所有字母放在单独的<span>元素
按下字母键

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

问题：

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

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

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

我的JS代码：

5 个答案:

演示