Question

第一次问问。试图制作一个刽子手游戏。当我得到键盘输入并将其与单词中的字母匹配时，我的警报会弹出。但是，执行jquery代码以显示.word类中的第n个span元素却没有。这是一个范围问题吗？我错过了什么？

由于

$(function(){
  words = ["elephant", "tiger", "dragon"];
  var keypress = '';
  var rand = words[Math.floor(Math.random() * words.length)];
  var wordLetters = rand.split('');
  for (var i = 0; i < wordLetters.length; i++) {
    $('.word').append("<span>  " + rand[i] +"  </span>");
    $('.word span').hide();
  }
  $('body').keypress(function(e){
    keypress = (String.fromCharCode( e.which ));
    for (var j in rand) {
      if (rand.hasOwnProperty(j)) {
        if (keypress === rand[j]) {
          //alert('This Alert Works!');
          //sadly this does not work
          $(".word span:nth-child(" + j + ")").show();
        }
      }
    }
  });
});

Answer 1

尝试++j，确保未使用选择器nth-child(0)：

 $(".word span:nth-child(" + ++j + ")").show();

Answer 2

两个可能的问题：

span：nth-child（n）选择一个跨度，如果它是第n个孩子，不一定是第n个跨度，所以 - 不知道你的html - 使用span更安全：nth-of-type代替
css从1开始计数，js用0

Answer 3

因为jQuery的实现：nth-选择器是严格派生的   从CSS规范来看，n的值是＆＃34; 1-indexed＆＃34;，意思是   计数从1开始。对于其他选择器表达式，例如   ：eq（）或：甚至jQuery遵循JavaScript＆＃34; 0-indexed＆＃34;数数。特定   一个包含两个<li>的单个$( "li:nth-child(1)" )选择   第一个<li>，$( "li:eq(1)" )选择第二个。

:nth-child(n)伪类很容易与:eq(n)混淆，甚至   虽然这两者可以导致显着不同的匹配元素。   使用:nth-child(n)，所有孩子都被计算在内，无论他们是什么   是，并且只有在匹配时才选择指定的元素   选择器附加到伪类。仅使用:eq(n)选择器   附属于伪类计算，不限于儿童   任何其他元素，并选择(n+1)th一个（n为0）。

参考：https://api.jquery.com/nth-child-selector/

使用：

$(".word span").eq(j).show();
//OR
$(".word span:eq(" + j + ")").show();
//One would expect that the following would work since nth- selectors start at 1, but it does not
$(".word span:nth-child(" + (j+1) + ")").show();

而不是：

$(".word span:nth-child(" + j + ")").show();

＆＃13;

$(function(){
  words = ["elephant", "tiger", "dragon"];
  var keypress = '';
  var rand = words[Math.floor(Math.random() * words.length)];
  var wordLetters = rand.split('');
  console.log( rand, wordLetters );
  for (var i = 0; i < wordLetters.length; i++) {
    $('.word').append("<span>  " + rand[i] +"  </span>");
    $('.word span').hide();
  }
  $('body').keypress(function(e){
    keypress = (String.fromCharCode( e.which ));
    for (var j in rand) {
      if (rand.hasOwnProperty(j)) {
        if (keypress === rand[j]) {
          //alert('This Alert Works!');
          //sadly this does not work
          $(".word span:eq(" + j + ")").show();
        }
      }
    }
  });
});

＆＃13;

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

＆＃13;

show（）在jQuery中的第n个元素上

3 个答案: