Question

我在我的一个部分中显示了数字计数器。当我向容器添加新的betslips时，数字正确显示。但是，当我删除任何行时，计数器没有得到更新。例如，如果有3行编号为1,2和3，并且如果我删除第2行，则更新的值为1和3.实际上，计数器应重置为1和2.

这是我的JS代码

添加betslip行

function createSingleBetDiv(betInfo) {
    var id = betInfo['betType'] + '_' + betInfo['productId'] + '_' + betInfo['mpid'],
        div = createDiv(id + '_div', 'singleBet', 'bet gray2'),
        a =  createA(null, null, null, null, 'right orange'),
        leftDiv = createDiv(null, null, 'left'),
        closeDiv = createDiv(null, null, 'icon_shut_bet'),
        singleBetNumber = ++document.getElementsByName('singleBet').length;

    // Info abt the bet
    $(leftDiv).append('<p class="title"><b>' + singleBetNumber + '.&nbsp;' + betInfo['horseName'] + '</b></p>');
    var raceInfo = "";
    $("#raceInfo").contents().filter(function () {
        if (this.nodeType === 3) raceInfo = $(this).text() + ',&nbsp;' + betInfo['betTypeName'] + ' (' + betInfo['value'] + ')';
    });
    $(leftDiv).append('<p class="title">' + raceInfo + '</p>');

    // Closing btn
    (function(id) {
        a.onclick=function() {
            removeSingleBet(id + '_div');
        };
    })(id);
    $(a).append(closeDiv);

    // Creating input field
    $(leftDiv).append('<p class="supermid"><input id="' + id + '_input\" type="text"></p>');

    // Creating WIN / PLACE checkbox selection
    $(leftDiv).append('<p><input id="' + id + '_checkbox\" type="checkbox"><b>' + winPlace + '</b></p>');

    // Append left part
    $(div).append(leftDiv);
    // Append right part
    $(div).append(a);
    // Appending div with data
    $.data(div, 'mapForBet', betInfo);

    return div;
}

删除betslip的功能

function removeSingleBet(id) {

    // Remove the div
    removeElement(id);

    // Decrease the betslip counter
    decreaseBetSlipCount();

    // Decrease bet singles counter
    updateBetSinglesCounter();
}

function decreaseBetSlipCount() {
    var length = $("#racingBetSlipCount").text().length,
        count = $("#racingBetSlipCount").text().substring(1, length-1),
        text;
    count = parseInt(count);

    if (!isNaN(count)) count--;
    if (count == 0) text = noSelections;
    else text = count;
    $("#racingBetSlipCount").text('(' + text + ')');
}

Answer 1

这可以仅使用CSS来完成，例如：

DEMO jsFiddle

<强> HTML：

 <div id="bets">
        <div class="bet">  some content</div>
        <div class="bet">  some content</div>
        <div class="bet">  some content</div>
    </div>

<强> CSS：

#bets {
    counter-reset: rowNumber;
}

#bets .bet {
    counter-increment: rowNumber;
}

#bets .bet::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

添加/删除任何行时，所有行号都会自动更新。

Answer 2

您可以通过以下步骤来实现这一目标;

用span，

括起来

$(leftDiv).append('<p class="title"><b><span class="bet_no">' + singleBetNumber + '<span>.&nbsp;' + betInfo['horseName'] + '</b></p>');

我假设你有一个名为“your_div”的外部div

每次增加和减少事件后调用以下函数

function updateBetNo() {
    var counter = 1;
    $("#your_div .bet_no").each(function(i, val) {
        $(this).text(counter);
        counter++;
    });
}

Answer 3

让betNumber可以找到：

$(leftDiv).append('<p class="title"><b><span class="singleBetNumber">' + singleBetNumber + '</span>.&nbsp;' + betInfo['horseName'] + '</b></p>');

插入或删除重新编号后：

$('.singleBedNumber').each(function(idx, el) {
    $(el).html('' + (idx + 1));
});

Answer 4

我看到的第一个问题是$（“＃racingBetSlipCount”）很可能没有选择你的想法。由于#racingBetSlipCount是一个id选择器，因此它只会选择一个项目。

对我来说，你需要将betnumber包含在可访问的内容中，这样你就可以更新它而无需解析标题。

首先你要更新betTitle的创建：

$(leftDiv).append('<p class="title"><b><span class=\'betNum\'>' + singleBetNumber + '</span>.&nbsp;' + betInfo['horseName'] + '</b></p>');

然后你可以遍历每个并适当地更新数字。

var count = 1;
$.each($(".betNum"), function(){
    $(this).html(count++);
});

如何修改我的jQuery函数来更新数字计数器

4 个答案: