如何在文本框中显示数字以跟踪打开的按钮数量
如何在文本框中显示数字以跟踪打开的按钮数量
提问于 2012-07-11 00:06:28
下面是一个只读文本框的代码：
<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“链接并选择一个网格按钮，当字母按钮出现时，然后单击按钮来打开和关闭，因为您可以看到文本框中没有显示任何内容。
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-07-11 00: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;
}您可能还想尝试使用jQuery的.toggleClass()方法。它就是为这类事情而生的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11417414
复制相关文章
相似问题
腾讯云开发者
