jQuery: 选择特定id的span元素

Question

在这个函数中，我收到一个错误消息，告诉我parseInt没有基数参数，即使我传递了变量moveCount。我认为这意味着id为#moveCount的span的值没有被分配给变量moveCount。我在下面标记了我认为问题产生的行。我尝试过以下代码：

moveCount = $('span #moveCount').html();

无论是否在选择器中使用“span”这个词，我都得到了相同的结果。

function incrementMoveCount() {
    //gets the html of the span with id
    //moveCount
    //turns it into a number
    //increments it by one
    //sets the html of the span with id moveCount
    //to the new move count
    var moveCount = 0; 
    var newMoveCount = 0;
    moveCount = $('span #moveCount').html();   # problem here
    newMoveCount = parseInt(moveCount);
    newMoveCount = newMoveCount + 1; 
    $('span #moveCount').html('newMoveCount');
}

html

<div id="meta">
<h1>Checkers</h1>
<h4>Moves: <span id="moveCount">0</span></h4>
</div>

- Leahcim

Answer 1

如果它是span的id，你可以删除空格-空格指定后代..所以你实际上是在寻找id=moveCount的span的后代。

$('span#moveCount').html();

如果您是通过ID进行选择，那么您不需要指定作为ID选择器是最快的 - ID是唯一的，因此它将始终查找具有该ID的第一个元素

$('#moveCount').html();

- wirey00

---

ID 应该是唯一的，但并非总是如此。如果您不确定，请在选择器中保留 span 元素。 - Dcortez

@Dcortez 不是一个好的实践。根据规范，页面上的ID应该始终是唯一的 https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute - wirey00

Answer 2

尝试删除空格...

moveCount = $('span#moveCount').html();

您的选择器正在选择一个带有id #moveCount的元素，该元素在一个span元素内部。

- Billy Moon

Answer 3

给定的id只能有一个元素，您不需要指定它是一个span。

$("#moveCount").html()

如果这不能给你想要的结果，问题不在jQuery代码中，我们需要查看HTML代码。

编辑：

$('#moveCount').html('newMoveCount');

应该是

$('#moveCount').html(newMoveCount);

- Kevin B

Answer 4

如果您通过id获取元素，则不需要标签名称来搜索它。因为，理论上一个HTML文档只应该有一个具有特定id的元素。因此，在您的情况下：$('#moveCount');也应该可以获取到该元素。我建议将代码更改为：

var moveCount = + $('#moveCount').text();
$('#moveCount').text(moveCount + 1);

jQuery的.text()方法将正确获取span的值，并且前面的'+'符号将自动转换为int。您不需要调用parseInt()。我们可以通过仅触发一次jQuery选择来进一步加速它：

var moveCountElement = $('#moveCount');
moveCountElement.text(+ moveCountElement.text() + 1);

希望这能有所帮助！

- amitsaurav

Answer 5

.html('newMoveCount'); 

这意味着 span 的 HTML 应该是字符串 'newMoveCount' 而不是 newMoveCount 变量的值。此外，span 和 id 之间不应有空格。总的来说，应该这样工作：

function incrementMoveCount() {
    var moveCount = 0;
    var newMoveCount = 0;
    moveCount = $('span#moveCount').html();
    newMoveCount = parseInt(moveCount);
    newMoveCount = newMoveCount + 1;
    $('span#moveCount').html(newMoveCount);
}

- SNAG