Question

下面的代码中有一堆字母按钮：

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

现在，以下代码可以打开答案按钮：

$('#answer'+btn).addClass("answerBtnsOn");

下面是单击“添加”按钮的代码，它从列中检索“答案”：

 echo '<td class="answertd">'.htmlspecialchars($searchAnswer[$key]).'</td>';
echo "<td class='addtd'><button type='button' class='add' onclick=\"parent.addwindow('$searchAnswer[$key]');\">Add</button></td></tr>";

下面是每个按钮（btn）的代码，它打开/关闭按钮：

function btnclick(btn)
{


    if ($(btn).hasClass("answerBtnsOn")) {
        $(btn).removeClass("answerBtnsOn").addClass("answerBtnsOff");
        return false;
    }

    if ($(btn).hasClass("answerBtnsOff")) {
        $(btn).removeClass("answerBtnsOff").addClass("answerBtnsOn");
        return false;
    }
}

但唯一的问题是上面的代码只能打开一个答案按钮。例如，如果“答案”为B，那么它将打开答案按钮B，如果“答案”为E，则可以打开答案按钮E.

问题在于，如果有多个答案。如果“答案”是B E，则它不会打开按钮B和E，如果“答案”是A D F，则它不会打开按钮A D和F.

所以我的问题是，如果有多个答案，我怎么能打开多个按钮？

样本：

点击here查看演示，请按照步骤操作，以便使用演示：

步骤1：当你打开应用程序时，你会看到一个绿色加号按钮页面，单击它，它将显示一个模态窗口。
步骤2：在模态窗口中有一个搜索栏，输入“AAA”和提交搜索，你会看到一堆行出现。
第3步：在第一行中，您会在“Answer”列下看到答案是B，点击此行内的“添加”按钮，模态窗口将关闭，你会看到答案按钮已经显示“B”按钮突出显示。

现在这个工作正常，但它只适用于单个答案，请按照以下步骤操作：

步骤4：再次单击绿色加号按钮并执行相同操作搜索“AAA”;
步骤5：这次选择一个有多个答案的行 “答案”栏，例如第三行在“答案”下回答“A C” 柱。点击“添加”按钮
步骤6：您将看到它显示相关按钮但是它没有打开任何答案按钮，“A”按钮和“C”按钮未突出显示为绿色。这是我遇到的问题

更新：

//I can't use the toggle method you have mentioned because there is a suitable reason for this (long story)
    if ($(btn).hasClass("answerBtnsOn")) {
            $(btn).removeClass("answerBtnsOn").addClass("answerBtnsOff");
            return false;
        }

        if ($(btn).hasClass("answerBtnsOff")) {
            $(btn).removeClass("answerBtnsOff").addClass("answerBtnsOn");
            return false;
        }

//When "Add" button is clicked, it should turn on correct buttons
    function addwindow(condition) { 

    $('input[type=button]').each(function(){
        if (condition){
            $(this).addClass('correct');
        }
    });

    }

HTML代码与问题顶部的html代码相同

Answer 1

你需要使用class而不是ID，并为所有正确的答案提供相同的类，所以所有正确的答案都会得到.correct的类，然后在jquery中：

$('.correct').addClass("answerBtnsOn");

修改

在评论中回答你的问题 - 是的，你应该创建一个按钮数组，在其上运行并将.correct类添加到所有正确的答案中。

还要更改代码：

if ($(btn).hasClass("answerBtnsOn")) { $(btn).removeClass("answerBtnsOn").addClass("answerBtnsOff"); return false; } if ($(btn).hasClass("answerBtnsOff")) { $(btn).removeClass("answerBtnsOff").addClass("answerBtnsOn"); return false; }

要：

$(btn).toggleClass("answerBtnsOn"); $(btn).toggleClass("answerBtnsOff");

它应该用更少的代码来做同样的事情。

<强> EDIT2：循环将是这样的：

$('input[type=button]').each(function(){ if (condition){ $(this).addClass('correct')); } });

如果这个答案是正确的，那么条件为真。

Answer 2

这是修改后的代码。首先我们初始化php变量：

$a = range("A","Z");
$correct = "ADERW"; // some string with correct letters (aka answers)

现在我们将javascript函数放入页面的头部（或外部文件）：

var oanswers = new Object(); // this object's attributes are named as correct letters
var answers = '<?php echo $correct; ?>'; //string
for (var i=0; i<answers.length; i++) {
  oanswers[answers[i]] = true;
}

function btnclick(btn) {
    if (!oanswers.hasOwnProperty(btn.id[6])) {
        return;
    }
    if ($(btn).hasClass('answerBtnsOff')) {
        $('.answers').each(function(){ // turn all correct answers on
            if (oanswers.hasOwnProperty(this.id[6])) {
                $(this).addClass('answerBtnsOn');
                $(this).removeClass('answerBtnsOff');
            }
        });
    } else {
        $('.answers').each(function(){ // turn all correct answers off again
            if (oanswers.hasOwnProperty(this.id[6])) {
                $(this).addClass('answerBtnsOff');
                $(this).removeClass('answerBtnsOn');
            }
        });
    }
}

btnclick功能可以关闭和打开所有正确的答案。如果您不想切换，只需删除整个else分支。现在它测试是否定义了对象的属性，而不是测试.created类的存在。

如何打开多个按钮？

2 个答案: