问如何在文本框中显示数字以跟踪打开的按钮数量
EN

Stack Overflow用户

提问于 2012-07-10 16:06:28

回答 1查看 373关注 0票数 0

下面是一个只读文本框的代码：

<td>
<input type="text" name="numberAnswer" class="numberAnswerTxt answertxt" id="mainNumberAnswerTxt" onChange="getButtons()" readonly="readonly" >
</td>

下面是显示按钮A-G的代码：

<?php
    $a = range("A","G");
?>

<table id="answerSection">
    <tr>

<?php
    $i = 1;
    foreach($a as $key => $val){
        if($i%7 == 1) echo"<tr><td>";
        echo"<input type=\"button\" onclick=\"btnclick(this);\" value=\"$val\" id=\"answer".$val."\" name=\"answer".$val."Name\" class=\"answerBtns answers answerBtnsOff\">";      
        if($i%7 == 0) echo"</td></tr>";
        $i++;
    }
?>
    </tr>
</table>

最后，下面是打开和关闭字母按钮的函数：

function btnclick(btn)
{
    var context = $(btn).parents('#optionAndAnswer');
    if (context.length == 0) {
        context = $(btn).parents('tr');
    }

    if ($(btn).hasClass("answerBtnsOn")) {
        $(btn).removeClass("answerBtnsOn").addClass("answerBtnsOff");
        return false;
    }

    if ($(btn).hasClass("answerBtnsOff")) {
        $(btn).removeClass("answerBtnsOff").addClass("answerBtnsOn");
        return false;
    }

    $('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : '');

}

我一直试图在这个函数中做的是，如果用户打开了一个按钮，它应该在文本框中添加数字。例如，假设所有按钮都关闭了，如果我打开按钮"B"，那么当一个按钮打开时，文本框应该在文本框中显示数字1，如果我接着打开按钮"E"，它应该在文本框中显示"2“，因为两个按钮现在都打开了，依此类推。换句话说，我想要跟踪打开了多少个按钮。

我如何才能做到这一点，因为目前，当我打开一个按钮时，文本框中没有显示任何内容。

下面是应用程序的demo：

当您打开应用程序时，只需单击"Open Grid“链接并选择一个网格按钮，当字母按钮出现时，然后单击按钮来打开和关闭，因为您可以看到文本框中没有显示任何内容。

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-07-10 16:22:37

计算已打开或关闭的按钮数量的行永远不会命中，因为您在设置按钮类之后立即使用了return false;。试试这个：

function btnclick(btn)
{
    var context = $(btn).parents('#optionAndAnswer');
    if (context.length == 0) {
        context = $(btn).parents('tr');
    }

    if ($(btn).hasClass("answerBtnsOn")) {
        $(btn).removeClass("answerBtnsOn").addClass("answerBtnsOff");
    }

    if ($(btn).hasClass("answerBtnsOff")) {
        $(btn).removeClass("answerBtnsOff").addClass("answerBtnsOn");
    }

    $('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : '');

    return false;
}