Question

首先感谢您的帮助。我是jquery和javascript的新手，我不会说那么多英语，所以我在研究中没有发现任何好处。

这是我的HTML

<li></li>
<li></li>
<li id="user1"></li>
<input type="checkbox" id="checkbox1">

<li></li>
<li></li>
<li id="user2"></li>
<input type="checkbox" id="checkbox2">

我想每次都选中带有id（“checkbox”+ i）的复选框我在（“user”+ i）中切换一个类来推入列表，然后发送邮件请求。

我试过这个

for(i = 1; i < 3; i++) {    
   document.getElementById('checkbox' + i).addEventListener('change', function() {
        document.getElementById('user' + i).setAttribute("class", "passInterestIds");
  });
}

但它只给了我user3独立的复选框

我该如何使这项工作？

Answer 1

所以只要id包含一位数就会导致我们从匹配函数中获取的内容，这将始终有效。然后，如果选中复选框，则添加类hello，否则删除类hello

＆＃13;

var elements = $('input[type^=checkbox');
elements.on('click', function(){
  var idNr = $(this).attr('id').match(/\d+/)[0];
  if($(this).is(':checked')) {
    $('#user' + idNr).addClass('hello');
  } else {
    $('#user' + idNr).removeClass('hello');
  }
});

＆＃13;

.hello {
  background-color: orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li id="user1"></li>
<input type="checkbox" id="checkbox1">

<li id="user2"></li>
<input type="checkbox" id="checkbox2">

＆＃13;

如果可以更改HTML ..更好的方法是使用包含数字的input元素中的value属性。如果您不能使用value属性，请使用data-user-id属性。

＆＃13;

var elements = $('input[type^=checkbox');
elements.on('click', function(){
  var idNr = $(this).val();
  if($(this).is(':checked')) {
    $('#user' + idNr).addClass('hello');
  } else {
    $('#user' + idNr).removeClass('hello');
  }
});

＆＃13;

.hello {
  background-color: orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li id="user1"></li>
<input type="checkbox" id="checkbox1" value="1">

<li id="user2"></li>
<input type="checkbox" id="checkbox2"  value="2">

＆＃13;

使用id为'checkbox'+ i的复选框切换id为'user'+ i的属性

1 个答案: