Question

我的页面上有多个具有相同类的按钮，现在当我尝试在按钮的click事件上调用方法时，该方法对所有按钮执行，因为它们具有相同的类。

我页面上的按钮是动态创建的，因此我无法为每个按钮指定不同的类。

我正在寻找一种只在点击给定类的第一个元素时执行某个特定方法的方法。

Answer 1

通过使用Jquery的.first()函数，您可以获取第一个元素，然后只将click事件绑定到它。

$(".sameClass").first().on("click", function() { console.log("clicked"); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="sameClass">Button 1</button>
<button class="sameClass">Button 2</button>
<button class="sameClass">Button 3</button>

Answer 2

这是：

$("button").each(function(i, item) {
  if(i === 0) {
    $(item).on("click", function() {
      console.log('works only for the first button');
    })
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class"test-class">btn 1</button>
<button class"test-class">btn 2</button>
<button class"test-class">btn 3</button>
<button class"test-class">btn 4</button>
<button class"test-class">btn 5</button>

我循环遍历所有按钮并仅为第一个按钮添加事件侦听器。

jQuery中具有相同类的多个按钮

2 个答案: