如何在数组中添加按钮并循环它们？

Question

Got a bunch of letter buttons in code below:

Code:

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

Now the code below is able to turn on an answer button:

Code:

function addwindow(btn) { 
$('#answer'+btn).addClass("answerBtnsOn");
}

But the only problem is that the code above is only able to turn on a single answer button on only. For example if the "Answer" is B , then it will look for button "#answerB" and turn on that button which is button B . or if the "Answer" is E , then it will look for button "#answerE" and turn on that button which is button E .

The problem is that if there are multiple answers. If the "Answer" is BE, then it does not turn on buttons B and E . This is because it is trying to find button "#answerBE" which is incorrect, it should be looking for button "#answerB" and button "#answerE" and turn them both on.

Another example is if "Answer" is ADF, it doesn't turn on buttons A D and F because it is trying to find button "#answerADF" which is incorrect, it should be looking for button "#answerA" , button "#answerD" , and button "#answerF" and turn them all on.

So my question is that how can I turn on multiple buttons if there are multiple Answers? Do I need to put all the buttons in an array and loop through them so that it is able to go through all the buttons and turn on those buttons which should be turn on?

UPDATE:

Below is the "Add" button which calls on the addwindow() function and above the add button is the "Answer" column where it displays rows of Answers

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

Answer 1

try this:

function addwindow(btn) { 
   var arr = btn.split("");
   $.each(arr, function(i, v) {
      $('#answer' + v).addClass("answerBtnsOn");
   })
}

jQuery.each()

Answer 2

I believe,you need this:

function addwindow(btn) { 
    var answers = $.map(btn.split(''),function(chr){   return "#answer"+chr;  }).join(', ');
    $(answers).addClass("answerBtnsOn");
}

Explanation :

btn.split('')   //splits btn string into char's array, 
                //  e.g. "ADE" will become ["A","D","E"]
$.map           //converts ["A","D","E"] 
                //  to ["#answerA","#answerD","#answerE"]
join(',')       //makes "#answerA, #answerD, #answerE" string 
                //  from ["#answerA","#answerD","#answerE"] array

Answer 3

It sounds like you are passing the 'btn' variable as a string. This is acceptable if you are able to split() the string and then use a for() loop to loop through the resulting array and assign the appropriate class(es).

function addwindow(btn){
    var answers = btn.split(''); // leave empty if values are not separated by a delimiter
    for(var i=0; i < answers.length; i++){
        $('#answer'+answers[i]).removeClass('answerBtnsOff').addClass('answerBtnsOn');
    }
}

Depending on your delimiter, you would want to modify the following code:

btn.split(''); // no delimiter
btn.split(' '); // space delimiter
btn.split(','); // comma delimiter
btn.split('|'); // pipe delimiter

It also appears that you are escaping your quotes but that is not necessary if you are also using concatenation.

Note: Unlike the double-quoted and heredoc syntaxes, variables and escape sequences for special characters will not be expanded when they occur in single quoted strings.

<?php
    $i = 1;
    foreach($a as $key => $val){
        echo ($i % 7 == 1 ? "<tr><td>" : "");
        echo '<input type="button" onclick="btnclick(this);" value="'.$val.'" id="answer'.$val.'" name="answer'.$val.'Name" class="answerBtns answers answerBtnsOff">";      
        echo ($i % 7 == 0 ? "</td></tr>" : "";
        $i++;
    }
?>