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 つのボタンがオンになると、テキストボックスに番号 1 が表示され、ボタン「E」をオンにすると、「」と表示されます。ボタン「E」をオフにすると、ボタン「B」のみがオンになるため、テキストボックスに「1」が表示されるようになります。つまり、オンになっているボタンの数を追跡したいと考えています。

ボタンをオンにしたときにテキストボックスに何も表示されていないため、どうすればこれを達成できますか。

アプリケーションのデモは次のとおりです。

アプリを開くときは、[Open Grid] リンクをクリックしてグリッド ボタンを選択します。文字ボタンが表示されたら、ボタンをクリックしてオンとオフを切り替えます。テキスト ボックスに何も表示されていないことがわかります。

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;
}

.toggleClass()jQuery のメソッドを使用することもできます。まさにこんなことのために作られました。

于 2012-07-10T16:22:37.403 に答える