从文本中的计数器获取变量 $i

Question

我只是不知道该怎么做。

我明白了Javascript

$(".email").on("keyup change", function() {
if ($(this).val().match(/@gmail/i)){
$(".groupa").show();    
$(".groupb").hide();

我有一个来自计数器的变量 i

我想把它放在电子邮件和 div 的文本旁边，但我试了又试都没有成功

$(".email+i+").on("keyup change", function() {
if ($(this).val().match(/@gmail/i)){
$(".groupa+i+").show();    
$(".groupb+i+").hide();

我希望它是电子邮件形式 class="email1", class="groupa1", class="groupb1", 等等

我可以在这里做什么？

我试过了

$(".email"+i)
$(".email"{i})
$(".email"+i+)

我的完整 html 与 css 和 js

我基本上添加了行，然后我想过滤 gmail 并显示一些选项。 css 只是示例，我想添加更多

css:

.groupa0, .groupb0, .groupa1, .groupa1, .groupa2, .groupb2, 
.groupa3, .groupb3{
 display: none;

html:

<table id="usertable">
<tr>
<td><b>User email: </b></td>
<td><b>User Options:</b></td>
</tr>
<tr>
<td><input class="form-control input-lg email0" type="email" 
 name="useremail[]" required /></td>
  <td>
<select class="form-control options" name="youchoose[]" required>
<option value=""></option>
<optgroup hidden class="groupa0" label="Group A">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</optgroup>
<optgroup hidden class="groupb0" label="Group B">
<option value="option4">option4</option>
<option value="option5">option5</option>
</optgroup>
</select>  
</td>
</tr>
</table>

js:

<script>

 var i = 1;
 $("#addbutton").click(function () {
 $("#usertable").append('<tr>'+
 '<td><input class="form-control input-lg email'+i+'" type="email" 
 name="useremail[]" required /></td>'+
 '<td>'+
  '<select class="form-select" name="role[]" required>'+
   '<option value=""></option>'+
   '<optgroup Class="groupa'+i+'" label="Internal Roles">'+
      '    <option value="option1">option1</option>'+
      '    <option value="option2">option2</option>'+
      '    <option value="option3">option3</option>'+
      '</optgroup>'+
    '<optgroup hidden class="groupb'+i+'" label="Group B">'+
      '<option value="option4">option4</option>'+
      '<option value="option5">option5</option>'+
      '</optgroup>'+
    '</select>'+  
  '</td>'+
 '<td><button type="button" class="removebutton" title="Remove this 
 row">X</button></td></tr>').find("input").each(function () {
 });
 i++;
 });;

 $(document).on('click', 'button.removebutton', function () {
 $(this).closest('tr').remove();
 return false;
 });

 </script>

<script>
$(".email").on("keyup change", function() {
if ($(this).val().match(/@gmail)){
$(".groupa").show();    
$(".groupb").hide();
} else {
$(".groupa")).hide();
$(".groupb").show();
}
});
</script>

Answer 1

//using string concatenation
for(let i = 1; i <= 3; i++)
{
    $('.email' + i).on("keyup change", function() {
        if ($(this).val().match(/@gmail/i)){
            $('.groupa' + i).show();    
            $('.groupb' + i).hide();
        }
    });
}

//using string interpolation (Template literal)
for(let i = 1; i <= 3; i++)
{
    $(`.email${i}`).on("keyup change", function() {
        if ($(this).val().match(/@gmail/i)){
            $(`.groupa${i}`).show();    
            $(`.groupa${i}`).hide();
        }
    });
}

从文本中的计数器获取变量 $i

get the variable $i from counter in text

javascript

variables

counter