1

私はそれがAZからのボタンを表示するphpコードを持っています：

  <table id="optionAndAnswer" class="optionAndAnswer">
    <tr class="answer">
    <td>3. Answer</td>
    <td>
        <?php
            $a = range("A","Z");
        ?>

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

...

私がやろうとしているのは、jqueryで上記のコードのテンプレートを作成して、ユーザーがこれらのボタンをブロックに追加したい場合に、jqueryを使用してこれらのボタンをテンプレートとまったく同じようにブロックに追加できるようにすることです。

以下はjqueryコードです：

var $this, i=0, $row, $cell;
$('#optionAndAnswer .answers').each(function() {
    $this = $(this);
    if(i%7 == 0) {
        $row = $("<tr/>").appendTo($answer);
        $cell = $("<td/>").appendTo($row);
    }
    var $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this);' />".replace('%s',$this.is(':visible')?'inline-block':'none')).attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class')).attr('id', $this.attr('id')+'Row');


    $newBtn.appendTo($cell);

    i++;
});

これで問題なく動作しますが、問題が1つあります。"answerBtnsOn"文字が何であるかに応じて、ユーザーが「answerBtnsOff」ボタンを強調表示したり、強調表示を解除したりできるようにしたいと思います。

たとえば、文字が「B」の場合は、ボタンBを強調表示し、他のボタンの強調表示を解除します。ACなどの複数の文字がある場合は、ボタンAとCを強調表示し、他のすべてのボタンの強調表示を解除します。

私が抱えている問題は、強調表示する必要のあるボタンが強調表示されますが、他のボタンの強調表示が解除されないことです。したがって、ボタンBが強調表示されていても、文字がAとCの場合、ボタンAとCのみが強調表示され、他のすべてのボタンは強調表示されないはずですが、ボタンBがAとCとともに強調表示されているため、これは発生しません。

だから私の質問は、以下のコードで、なぜボタンのハイライトを解除しないのですか？

var answersrow = $.map(btn.split(''),function(chr){   return "#answer"+chr+"Row";  }).join(', ');

$('.answerBtnsRow').removeClass('answerBtnsOff').removeClass('answerBtnsOn');
$(answersrow).addClass("answerBtnsOn").siblings().addClass('answerBtnsOff');

アップデート：

このアプリケーションでデモを作成しました。デモを使用できるようにするには、URLを開き、以下の手順に従ってください

  • ステップ1：アプリを開いたら、すぐに[質問を追加]ボタンをクリックします。これにより、上記と同じコントロールを示すテーブル行が下に追加されます。
  • ステップ2：追加した行内で、[グリッドを開く]リンクをクリックし、ボタン[7]を選択します。これにより、下の[AG]から7つのボタンが出力されます。
  • ステップ3：左側の行に緑色のプラスボタンが表示されます。このボタンをクリックすると、モーダルウィンドウが表示されます。
  • ステップ4：モーダルウィンドウの検索バーに検索バーが表示されたら、「AAA」と入力して送信します。
  • ステップ5：検索すると多数の結果が表示されます。最初の行には、その最初の行内のその列の下に「B」と表示されている「Answer」列が表示されます。[追加]ボタンをクリックして、その行を追加します。
  • ステップ6：行内で、ボタン「B」が強調表示されていることがわかります。

これは現時点では問題ありませんが、問題が発生しています。

  • ステップ7：行の緑色のプラスボタンをもう一度クリックして、同じ検索を実行します。
  • ステップ8：今回は、「Answer」が「AC」である2番目の行を追加します。ボタンAとCが強調表示されているのに、ボタンBはまだ強調表示されているので、オフにする必要があります。

これが私の問題です。この例では、「B」ボタンがオフにならないのはなぜですか。

4

1 に答える 1

1

まず、$('.answerBtnsRow')私が知る限り、存在しません。これが機能しない理由です。さらに、そのセレクターが存在したとしましょう。a) 特定の特定の行だけでなく、すべての行に対してそれを実行し、b) 次のいずれかを実行する必要があります。

//to remove all of either answerBtnsOff, answerBtnsOn -- probably not what you want
$('.answerBtnsOff, .answerBtnsOn').removeClass('answerBtnsOff answerBtnsOn');

//to remove the ones from _this answer row_ which appears what you want
$(answersrow + ' .answerBtnsOn').removeClass('answerBtnsOn');

要約すると、次のように置き換える必要があります。

var answersrow = $.map(btn.split(''),function(chr){   return "#answer"+chr+"Row";  }).join(', ');

$('.answerBtnsRow').removeClass('answerBtnsOff').removeClass('answerBtnsOn');
$(answersrow).addClass("answerBtnsOn").siblings().addClass('answerBtnsOff');

と：

var answersrow = $.map(btn.split(''),function(chr){   return "#answer"+chr+"Row";  }).join(', ');

$(answersrow + ' .answerBtnsOn').removeClass('answerBtnsOn');
$(answersrow).addClass("answerBtnsOn").siblings().addClass('answerBtnsOff');
于 2012-07-09T16:53:01.260 に答える