如何使用自动编号类进入点击功能

how to use auto numbered class into click function

本文关键字：入点 功能 编号 何使用      更新时间：2023-09-26

我在一个网页上多次使用以下HTML，这是由PHP生成的。

<a href="#" class="generate">generate</a><div class="selectArea selectBox"></div>

现在我用这段代码给每个div他们自己单独的类

$(document).ready(function() {
  $(".selectArea").each(function(i) {
    $(this).addClass("selectBox" + (i+1));
  });
});

但是现在我需要改变这个:

$(".selectBox").html($select);

在click函数内

$(document).on('click', '.generate', function () {

所以它也适用于(i+1)

我想达到的目标

以上代码是整个项目的一部分。在这个项目中，我得到了一个从几个输入生成选项的选择框。在.html中，我将这个选择框添加到div中。但是现在它被添加到页面上的所有div中，而不仅仅是一个。

如果.generate元素位于.selectBoxdiv的正前方，则代替:

$(".selectBox").html($select);
使用jQuery的 .next() : 
$(this).next('.selectArea').html($select);

我认为每个div都被赋予了相同的类，所以所有div都会受到影响。

在函数外部声明i，使其成为全局变量。给它起个好点的名字

像这样

var select_box_count = 0;
$(document).ready(function() {
  $(".selectArea").each(function() {
    select_box_count ++;
    $(this).addClass("selectBox" + (select_box_count+1));
  });
});

你可以用id

引用它

在你想要的div中

$('#id').html($select);

或者只是使用像

这样的选择器
$('.selectBox:first-child').html($select);

或者只是

$(".selectBox")[number element].html($select);
相关文章：