Question

我有以下代码：

while ($row = $result->fetch_assoc()) {
    echo "<div class='competitor' style='background: ".$row['Colour'].";'>";
    echo "<div class='competitorname'>".$row['CompetitorName']."</div><br>";
    echo "<div class='competitorscore' id='".$row['CompetitorID']."'>";
        echo"<label id='".$row['CompetitorName']."'></label></div>";
        echo "<input type='button' value='Increase' id='inc' onclick='incNumber()'/>";
        echo "<input type='button' value='Decrease' id='dec' onclick='decNumber()'/>";
}

代码链接到以下脚本：

var i = 0;

function incNumber() {
    if (i < 10) {
        i++;
    } else if (i = 10) {
        i = 0;
    }
    document.getElementById('display').innerHTML = i;
}

function decNumber() {
    if (i > 0) {
        --i;
    } else if (i = 0) {
        i = 10;
    }
    document.getElementById('display').innerHTML = i;
}

代码创建记分板。它为每个团队创建一个div，并为该团队提供分数。

我遇到的问题是“增加”和“减少”按钮正在增加和减少只有一个团队（第一个团队）的分数。这是因为脚本正在寻找id ='display'的标签，并将每个按钮链接到该标签。

我的问题是，如何为每个使用脚本的团队创建不同的ID，以便每个增加/减少按钮都链接到不同的团队？

Answer 1

您的$row['CompetitorID']值可能是唯一的。将其附加到您正在使用的ID。

Answer 2

使用CompetitorID作为递增和递减函数的参数来告诉它要影响哪一行。你的标签：

<label id='display".$row['CompetitorID']."'></label>

您的按钮onclick事件：

onclick='incNumber(".$row['CompetitorID'].")'

然后你的JavaScript：

function incNumber(id) {
    if (i < 10) {
        i++;
    } else if (i = 10) {
        i = 0;
    }
    document.getElementById('display' + id).innerHTML = i;
}

修改

对于评论中的问题，回显隐藏字段，该字段存储每个团队的值：

<input type='hidden' id='score".$row['CompetitorID']."' value='0'/>

然后删除全局var i = 0;并修改与此类似的函数：

function incNumber(id) { // Get the score input var scoreField = document.getElementById('score' + id); // Get the value var i = parseInt(scoreField.value); if (i < 10) { i++; } else if (i = 10) { i = 0; } // Set the visual score document.getElementById('display' + id).innerHTML = i; // Set the score input to the new score scoreField.value = i; }

如何为标签指定动态ID值？

2 个答案: