Question

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

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

}

我在这个功能中尝试做的是，如果用户打开了一个按钮，它应该在texbox中添加数字。例如，假设所有按钮都关闭，如果我打开按钮＆＃34; B＆＃34;，那么当一个按钮打开时，文本框应该在文本框中显示数字1，如果我然后打开按钮＆＃34 ; E＆＃34;，它应显示＆＃34; 2＆＃34;在文本框中，因为现在打开了两个按钮等。另外，如果我关闭按钮＆＃34; E＆＃34;，它应该返回显示＆＃34; 1＆＃34;在文本框中只作为按钮＆＃34; B＆＃34;打开了。换句话说，我想跟踪已打开的按钮数量。

如何实现这一目标，因为当我打开按钮时，文本框中没有显示任何内容。

以下是应用程序的demo：

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

Answer 1

计算已打开或关闭的按钮数量的行永远不会被点击，因为您在设置按钮类后立即有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()方法。它就是为了这种事情而制造的。

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

1 个答案: