Question

我有一个PHP代码，它显示来自A-Z的按钮：

  <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”按钮。

E.g如果字母为“B”，则突出显示按钮B并取消突出显示其他按钮。如果有多个字母，例如A C，则突出显示按钮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');

更新：

我已在此application中创建了一个演示版。请打开网址并按照以下步骤操作，以便能够使用演示

步骤1：当您打开应用程序时，单击“添加问题”按钮直接，这将在下面添加一个表格行显示相同控制如上。
第2步：在刚刚添加的行中，点击“打开网格” 链接并选择按钮“7”，这将从“A-G”输出7个按钮下方。
步骤3：现在在左侧的行中，您将看到绿色加号按钮，点击此按钮，将出现一个模态窗口。
步骤4：在模态窗口的搜索栏中，您将看到一个搜索栏，输入“AAA”并提交。
第5步：您会看到一系列搜索结果。在里面在第一行，您将看到一个“答案”列，其中表示“B” 第一行中的列。单击“添加”按钮添加该按钮行。
步骤6：您现在将在行中看到按钮“B” 突出显示。

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

步骤7：再次单击行中的绿色加号按钮并执行相同的搜索。
步骤8：这次添加“Answer”为“A C”的第二行。现在如你所见，按钮A和C突出显示，但按钮B是仍然突出显示，应该关闭它。

这就是我的问题，在这个例子中为什么按钮“B”没有关闭，因为它现在不是答案？

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

按钮没有突出显示

1 个答案: