0

以下是只读文本框的代码：

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

下面是显示按钮 AG 的代码：

<?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 : '');

}

我一直试图在这个函数中做的是，如果用户打开了一个按钮，它应该在 texbox 中添加数字。例如，假设所有按钮都关闭，如果我打开按钮“B”，那么文本框应该在打开一个按钮时在文本框中显示数字 1，如果我然后打开按钮“E”，它应该显示“ 2”在文本框中，因为现在打开了两个按钮等等。此外，如果我关闭按钮“E”，它应该回到在文本框中显示“1”，因为只有按钮“B”被打开。换句话说，我想跟踪打开了多少按钮。

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

这是应用程序的演示：

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

4

1 回答 1

2

计算已打开或关闭的按钮数量的行永远不会被击中，因为您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;
}

您可能还想尝试使用 jQuery 的.toggleClass()方法。它就是为这种事情而制作的。

于 2012-07-10T16:22:37.403 回答