Question

我写了一些代码，这些代码是基本的上/下投票列表。 https://alasdairjames.github.io/up-down-counter1/

除了最后一个列表项之外，这绝对可以正常工作。所有其他列表项都应按其应有的表决权。

在最后一个列表项中，如果我对它进行了几次“下”表决，然后又对其进行了“上”表决，即使其计数器低于其父上级同级计数器，if语句仍会运行。

我检查了所有代码，看不到问题出在哪里。

//Move it up 
$(".testMoveUp").on("click", function(event){
    // select the counter, increase it
    const counter = $(event.target).siblings(".datasetCounter");
    let counterNew = +$(counter).text()+1; 
    $(counter).text(counterNew);
    //select this and previous counters
    var thisCounter = $(event.target).siblings(".datasetCounter").text();
    var prevCounter = $(event.target).parent().prev().children(".datasetCounter").text();
    console.log(thisCounter);
    console.log(prevCounter);
    //move if appropriate
    if ( thisCounter > prevCounter) {
        var parent = $(event.target).parent();
        var prevParent = $(event.target).parent().prev();
        $(parent).insertBefore(prevParent);
    }
});

//Move it down
$(".testMoveDown").on("click", function(event){
    // select the counter, increase it
    const counter = $(event.target).siblings(".datasetCounter");
    let counterNew = $(counter).text()-1; 
    $(counter).text(counterNew);
    //select this and previous counters
    var thisCounter = $(event.target).siblings(".datasetCounter").text();
    var nextCounter = $(event.target).parent().next().children(".datasetCounter").text();
    console.log(thisCounter);
    console.log(nextCounter);
    //move if appropriate
    if ( thisCounter < nextCounter) {
        var parent = $(event.target).parent();
        var nextParent = $(event.target).parent().next();
        $(parent).insertAfter(nextParent);
    }
});

Answer 1

{ "0": {}, "1": {}, "2": {}, "3": {} }-您在这里比较字符串，而不是数字。

使用parseInt()将数值存储在if (thisCounter < nextCounter)和thisCounter中：

nextCounter

Answer 2

字符串"9"大于字符串"10"。比较它们之前，请确保将值转换为数字。

Answer 3

问题出在这两行：

var thisCounter = $(event.target).siblings(".datasetCounter").text();
var nextCounter = $(event.target).parent().next().children(".datasetCounter").text();

您正在获取文本值并进行比较。

更简单的解决方法是将文本解析为数字。由于您确定它们将始终是数字，因此您只需在比较中添加“ +”即可：

if (+thisCounter < +nextCounter) {
    ...
}

注意：请记住将其添加到两个比较中，而不仅是一个

if语句即使在错误条件下也执行

3 个答案: