按钮没有被取消高亮显示

buttons are not being unhighlighted

本文关键字：高亮 显示 取消 按钮      更新时间：2023-09-26

我有一个php代码，它显示a-Z:中的按钮

  <table id="optionAndAnswer" class="optionAndAnswer">
    <tr class="answerswer">
    <td>3. Answer</td>
    <td>
        <?php
            $a = range("A","Z");
        ?>
        <table id="answerswerSection">
            <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='"answerswer".$val."'" name='"answerswer".$val."Name'" class='"answerswerBtns 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++;
});

现在这很好，但我有一个问题。我希望用户能够高亮显示"answerswerBtnsOn"，并根据字母的内容取消高亮显示"answerswerBtnsOff"按钮。

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("answerswerBtnsOn").siblings().addClass('answerBtnsOff');

更新：

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

  • 步骤1:打开应用程序时，单击"添加问题"按钮这将立即在下面添加一个表行，显示相同的控制
  • 步骤2：在您刚刚添加的行中，单击"打开网格"链接并选择按钮"7"，这将从"A-G"输出7个按钮下面
  • 第三步：现在在左手边的一排，你会看到一个绿色加号按钮，单击此按钮，将出现一个模式窗口
  • 步骤4：在模态窗口的搜索栏中，您将看到一个搜索栏，键入"AAA"并提交
  • 第五步：你会看到一堆搜索结果。在第一行你会看到一个"Answer"列，下面写着"B"列。单击"添加"按钮添加行
  • 步骤6：您现在将看到在您的行中，按钮"B"是突出显示

目前这还不错，但现在问题来了：

  • 步骤7：再次单击行中的绿色加号按钮并执行相同的搜索
  • 第8步：这一次添加第二行，其中"答案"为"A C"。现在如您所见，按钮A和C突出显示，但按钮B突出显示仍然高亮显示，应将其关闭

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

首先，据我所知，$('.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("answerswerBtnsOn").siblings().addClass('answerBtnsOff');

带有：

var answersrow = $.map(btn.split(''),function(chr){   return "#answer"+chr+"Row";  }).join(', ');
$(answersrow + ' .answerBtnsOn').removeClass('answerBtnsOn');
$(answersrow).addClass("answerswerBtnsOn").siblings().addClass('answerBtnsOff');
相关文章：