0

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

<?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。

问题是，如果有多个答案。如果“Answer”是BE，则不打开按钮B和E，如果“Answer”是ADF，则不打开按钮AD和F。

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

演示：

单击此处查看演示，请按照以下步骤使用演示：

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

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

  • 第四步：再次点击绿色的加号按钮，同样搜索“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 代码相同

4

2 回答 2

1

您需要使用类而不是 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'));
    }
});

如果此答案正确，则条件为真。

于 2012-07-08T10:39:40.493 回答
0

这是修改后的代码。首先我们初始化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 类的存在。

于 2012-07-08T11:51:20.607 回答