1

我有一个 php 代码，它显示来自 AZ 的按钮：

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

现在这工作正常，但我有一个问题。我希望用户能够"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');

更新：

我在这个应用程序中创建了一个演示。请打开网址并按照以下步骤操作，以便能够使用演示

  • 第 1 步：当您打开应用程序时，立即单击“添加问题”按钮，这将在下方添加一个表格行，显示与上述相同的控件。
  • 步骤2：在刚刚添加的行中，点击“Open Grid”链接并选择按钮“7”，这将从下面的“AG”中输出7个按钮。
  • 第 3 步：现在在左侧的行中，您将看到一个绿色的加号按钮，单击此按钮，将出现一个模式窗口。
  • 第 4 步：在模式窗口的搜索栏中，您将看到一个搜索栏，输入“AAA”并提交。
  • 第 5 步：您将看到一堆结果供您搜索。在第一行中，您将看到一个“Answer”列，该列在该第一行中的该列下显示“B”。单击“添加”按钮以添加该行。
  • 第 6 步：您现在将看到在您的行中，按钮“B”被突出显示。

目前这很好，但现在出现了问题：

  • 第 7 步：再次单击该行中的绿色加号按钮并执行相同的搜索。
  • 第 8 步：这次添加“Answer”为“A C”的第二行。现在您可以看到按钮 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 回答